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.
``jsx
import { Tag } from "@asphalt-react/tag"
`
The Tag family exports unit components using which you can compose a Tag:
1. TagIcon
2. TagText
3. TagAction
Tag comes with 5 defined intents: neutral (default), success, info, warning and danger.
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"
`
* Use tab to move focus to the TagAction component.TagAction` component.
* Use space or enter to interact with the
Tag accepts most global html attributes.
[comment]: # "Tag Props"
Content for Tag.
| type | required | default |
| ---- | -------- | ------- |
| node | false | N/A |
Controls size of the tag. Accepts xs, s, m, l for extra-small, small, medium & large
| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |
Applies danger intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Applies warning intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Applies information intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Applies success intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Accents the Tag with a disc matching the intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
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 |
Text for the Tag component.
[comment]: # "TagText Props"
Text content for Tag.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Icon for the Tag component. Accepts SVG.
[comment]: # "TagIcon Props"
React node for Tag's icon.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Size of the Tag's icon. Accepts "xs, "s", "m", "l" for extra-small, small, medium & large.
| type | required | default |
| ---- | -------- | ------- |
| enum | false | N/A |
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"
React node for tag's action
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
[comment]: # "CustomTag Props"
Content for the custom Tag.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Controls size of the tag. Accepts "xs", "s", "m", "l" for extra-small, small, medium & large.
| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |
Accents the custom Tag with a disc matching the intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Applies provided color to the text.
| type | required | default |
| ------ | -------- | ------- |
| string | false | N/A |
Applies provided color to the icon & accent.
| type | required | default |
| ------ | -------- | ------- |
| string | false | N/A |
Applies provided color as surface color.
| type | required | default |
| ------ | -------- | ------- |
| string | false | N/A |