# @asphalt-react/tag

> Tag

Latest version **2.16.0** (published 2026-07-28) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @asphalt-react/tag
pnpm add @asphalt-react/tag
yarn add @asphalt-react/tag
bun add @asphalt-react/tag
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.16.0 |
| Published | 2026-07-28 |
| First published | 2022-03-30 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 41.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | UX Engineering - Web |
| Maintainers | sayantan1211, dawn29, antoniomontana, goto.abhinav, elayudhanira-gojek, yessyprmtsr, soorajj |
| Keywords | asphalt, tag, design language system, dls, component |

## Links

- npm: https://www.npmjs.com/package/@asphalt-react/tag
- npm.io page: https://npm.io/package/@asphalt-react/tag

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [@asphalt-react/helper](https://npm.io/package/@asphalt-react/helper.md) ^2.16.0
- [@asphalt-react/svg-normalizer](https://npm.io/package/@asphalt-react/svg-normalizer.md) ^2.16.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.16.0 (latest) — 2026-07-28
- 2.0.0-alpha.29 (next) — 2023-12-15
- 2.15.1 — 2026-04-28
- 2.15.0 — 2026-04-13
- 2.14.0 — 2026-03-11
- 2.13.0 — 2026-02-19
- 2.12.2 — 2026-01-28
- 2.12.1 — 2025-12-19
- 2.12.0 — 2025-11-28
- 2.11.0 — 2025-11-10
- 2.10.0 — 2025-10-27
- 2.9.0 — 2025-10-02
- 2.8.1 — 2025-09-10
- 2.8.0 — 2025-08-14
- 2.6.0 — 2025-07-11
- … 27 more at https://npm.io/package/@asphalt-react/tag/versions

## README

# Tag

![npm](https://img.shields.io/npm/dt/@asphalt-react/tag?style=flat-square)
[![npm version](https://badge.fury.io/js/@asphalt-react%2Ftag.svg)](https://badge.fury.io/js/@asphalt-react%2Ftag)

Tags are a set of interactive keywords or labels to help organize and categorize content. Tag offers multiple support intents. Tag support icons and actions along with text. You can also customize a Tag.

## Usage

```jsx
import { Tag } from "@asphalt-react/tag"

<Tag>Help</Tag>
```

## Unit components

The Tag family exports unit components using which you can compose a Tag:

1. TagIcon
2. TagText
3. TagAction

## Intents

Tag comes with 5 defined intents: *neutral* (default), *success*, *info*, *warning* and *danger*.

## Customizing a Tag

CustomTag can be helpful when you have to express more than 5 system states. For example, in a complex payment app, a transaction can be in 6 or more states. The Tag component only supports 5 intents - info, warning, success, danger and netural. To support more states for you can use CustomTag.

Do keep in mind, that CustomTag is outside the scope of theming. You must manage all the colors by yourself per your app's design. Here's an example:

```jsx
import { CustomTag, TagIcon, TagText } from "@asphalt-react/tag"

<CustomTag surface="black" content="#333" intent="white">
  <TagIcon><User /></TagIcon>
  <TagText>A custom tag</TagText>
</CustomTag>
```

### Keyboard Interactions

* Use <kbd>tab</kbd> to move focus to the `TagAction` component.
* Use <kbd>space</kbd> or <kbd>enter</kbd> to interact with the `TagAction` component.

### Accessibility

Tag accepts most global [html attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

[comment]: # "Tag Props"

## Props

### children

Content for Tag.

| type | required | default |
| ---- | -------- | ------- |
| node | false    | N/A     |

### size

Controls size of the tag. Accepts xs, s, m, l for extra-small, small, medium & large

| type | required | default |
| ---- | -------- | ------- |
| enum | false    | "m"     |

### danger

Applies danger intent.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### warning

Applies warning intent.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### info

Applies information intent.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### success

Applies success intent.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### accented

Accents the Tag with a disc matching the intent.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### wrap

Wraps the content of the Tag, allowing it to break to a new line when the text exceeds the container's width.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

# TagText

Text for the Tag component.

[comment]: # "TagText Props"

## Props

### children

Text content for Tag.

| type | required | default |
| ---- | -------- | ------- |
| node | true     | N/A     |

# TagIcon

Icon for the Tag component. Accepts SVG.

[comment]: # "TagIcon Props"

## Props

### children

React node for Tag's icon.

| type | required | default |
| ---- | -------- | ------- |
| node | true     | N/A     |

### size

Size of the Tag's icon. Accepts "xs, "s", "m", "l" for extra-small, small, medium & large.

| type | required | default |
| ---- | -------- | ------- |
| enum | false    | N/A     |

# TagAction

A Tag can be made interactive, by using the TagAction component. You can pass any interactive element such as Button to invoke actions related to the Tag.

[comment]: # "TagAction Props"

## Props

### children

React node for tag's action

| type | required | default |
| ---- | -------- | ------- |
| node | true     | N/A     |

# CustomTag

[comment]: # "CustomTag Props"

## Props

### children

Content for the custom Tag.

| type | required | default |
| ---- | -------- | ------- |
| node | true     | N/A     |

### size

Controls size of the tag. Accepts "xs", "s", "m", "l" for extra-small, small, medium & large.

| type | required | default |
| ---- | -------- | ------- |
| enum | false    | "m"     |

### accented

Accents the custom Tag with a disc matching the intent.

| type | required | default |
| ---- | -------- | ------- |
| bool | false    | false   |

### content

Applies provided color to the text.

| type   | required | default |
| ------ | -------- | ------- |
| string | false    | N/A     |

### intent

Applies provided color to the icon & accent.

| type   | required | default |
| ------ | -------- | ------- |
| string | false    | N/A     |

### surface

Applies provided color as surface color.

| type   | required | default |
| ------ | -------- | ------- |
| string | false    | N/A     |

---
_Source: https://npm.io/package/@asphalt-react/tag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._