2.0.0-rc.4 • Published 9 months ago

@asphalt-react/tag v2.0.0-rc.4

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
9 months ago

Tag

npm

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.

typerequireddefault
nodefalseN/A

size

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

typerequireddefault
enumfalse"m"

danger

Applies danger intent.

typerequireddefault
boolfalsefalse

warning

Applies warning intent.

typerequireddefault
boolfalsefalse

info

Applies information intent.

typerequireddefault
boolfalsefalse

success

Applies success intent.

typerequireddefault
boolfalsefalse

accented

Accents the Tag with a disc matching the intent.

typerequireddefault
boolfalsefalse

TagText

Text for the Tag component.

Props

children

Text content for Tag.

typerequireddefault
nodetrueN/A

TagIcon

Icon for the Tag component. Accepts SVG.

Props

children

React node for Tag's icon.

typerequireddefault
nodetrueN/A

size

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

typerequireddefault
enumfalseN/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

typerequireddefault
nodetrueN/A

CustomTag

Props

children

Content for the custom Tag.

typerequireddefault
nodetrueN/A

size

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

typerequireddefault
enumfalse"m"

accented

Accents the custom Tag with a disc matching the intent.

typerequireddefault
boolfalsefalse

content

Applies provided color to the text.

typerequireddefault
stringfalseN/A

intent

Applies provided color to the icon & accent.

typerequireddefault
stringfalseN/A

surface

Applies provided color as surface color.

typerequireddefault
stringfalseN/A