@asphalt-react/tag

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

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.

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