Tag
Add contextual labels and tags to your content with Rothko UI's Tag component. Highlight important information, categorize items, or create interactive filters, enhancing the visual organization and usability of your user interfaces.
Usage
import { Tag } from '@rothko-ui/ui';
- Example
- Code
example tag
Appearance
- Example
- Code
outline tag
filled tag
Closeable
- Example
- Code
closeable tag
With Kind
- Example
- Code
Primary
Secondary
Success
Info
Warning
Danger
Props
Name | Type | Default | Description |
---|---|---|---|
Name className | Type string | Default | Description Additional class name for the tag. |
Name appearance | Type 'filled' | 'outline' | Default | Description Appearance style of the tag |
Name onClose | Type () => void | Default | Description Callback function triggered when the tag is closed |
Name kind | Type RothkoKind | Default | Description Sets the font and border color semantically |
Name id | Type string | Default | Description Unique identifier for the tag. |
Name role | Type React.AriaRole | Default | Description The role of the tag. |
Name style | Type React.CSSProperties | Default | Description Custom styles for the tag. |