@asphalt-react/tag
v2.0.0-rc.4
Published
Tag
Downloads
466
Readme
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:
- TagIcon
- TagText
- 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 |