Tag

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

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:

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 tab to move focus to the TagAction component.
• Use space or enter to interact with the TagAction component.

Accessibility

Tag accepts most global html attributes.

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 |

TagText

Text for the Tag component.

Props

children

Text content for Tag.

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

TagIcon

Icon for the Tag component. Accepts SVG.

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.

Props

children

React node for tag's action

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

CustomTag

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 |