Tag
Preview
index.tsxNeutralAccent
NeutralAccent
John SmithJohn SmithSmallMediumLarge
DisabledDisabledDisabledDisabled
DisabledDisabledDisabledDesign Tokens for Tag
| Token | Color for | State/Meaning |
|---|---|---|
| --par-color-bg-tag | Tag background | Default/Enabled |
| --par-color-bg-tag-hovered | Tag background | Hovered |
| --par-color-bg-tag-selected | Tag background | Selected |
| --par-color-bg-tag-disabled | Tag background | Disabled |
| --par-color-border-tag | Tag border | Any |
| --par-color-text-tag | Tag text | Default/Enabled |
| --par-color-text-tag-disabled | Tag text | Disabled |
| --par-color-icon-tag | Tag icon | Any |
| --par-color-bg-tag-remove-hovered | Remove button background | Hovered |
| --par-color-bg-tag-remove-pressed | Remove button background | Pressed |
| --par-color-bg-tag-remove-disabled | Remove button background | Disabled |
| --par-color-text-tag-remove | Remove button text/icon | Any |
| --par-color-text-tag-remove-disabled | Remove button text/icon | Disabled |
Tag API Reference
<Tag />
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | (required) | Tag label (nội dung hiển thị chính). |
| icon | ReactNode | Icon hoặc hình ảnh hiển thị bên trái label. | |
| size | 'sm' | 'md' | 'lg' | 'md' | Kích thước của Tag. |
| kind | 'glass' | 'outlined' | 'outlined' | Kiểu hiển thị của Tag. |
| color | 'neutral' | 'accent' | 'neutral' | Màu sắc của Tag. |
| value | string | number | Giá trị của Tag, dùng cho các trường hợp như checkbox, radio, dropdown, input. | |
| disabled | boolean | false | Vô hiệu hóa Tag. |
| onRemove | (value: string | number) => void | Callback khi nhấn nút xóa (close). | |
| ...spanProps | HTMLSpanElement props | Kế thừa tất cả props mặc định của thẻ <span> (className, style, ...). |
Lưu ý: Tag luôn hiển thị nút xóa nếu có
onRemovetruyền vào. Tag kế thừa toàn bộ props của HTMLSpanElement.