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.
Import
- Global
- Single
import { Tag } from '@rothko-ui/react';
Usage
- Example
- Code
example tag
Variant
- 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 children | Type ReactNode | Default | Description The content of the tag |
Name className | Type string | Default | Description CSS class name(s) |
Name kind | Type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | Default | Description The tag's semantic style |
Name onClose | Type () => void | Default | Description The callback function when the tag is closed |
Name role | Type AriaRole | Default | Description The ARIA role for the tag |
Name style | Type CSSProperties | Default | Description The inline style for the tag |
Name variant | Type 'filled' | 'outlined' | Default 'filled' | Description The appearance style of the tag |