Tag
A versatile tag component for categorizing content, displaying status, or labeling items.
Usage
The Tag component is used to label, categorize, or organize items using keywords that describe them.
Examples
Variants
Change the visual appearance of the tag by using the variant prop.
With Icon
You can add icon to a tag to provide more context. Use the iconOnly prop for tags that only contain an icon.
API Reference
| Prop | Type | Default |
|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
| tone | 'primary' | 'secondary' | 'tertiary' | 'primary' |
| variant | 'primary' | 'secondary' | 'tertiary' | 'primary' |
| iconOnly | boolean | false |
| selected | boolean | false |
| disabled | boolean | false |