Tag
Tag is a simple, lightweight label used for categories, topics, versions, or static metadata.
It is lighter than Badge and does not include removal functionality by default (though it can be made clickable).
Basic Usage
<Tag variant="info">Documentation</Tag>
Clickable Tags
<Tag
variant="success"
onClick={() => console.log('Filter applied')}
>
Stable
</Tag>
Stable
Sizes
SmallMediumLarge
Variants
DefaultInfoSuccessWarningDangerNeutral
With Icon
<Tag icon="📁" variant="info">v2.4.1</Tag>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 'default' | Semantic color |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the tag |
icon | ReactNode | — | Optional leading icon |
onClick | function | — | Makes the tag interactive |
disabled | boolean | false | Disables click interaction |
Accessibility
- Uses semantic
<span>or<button>when interactive - Good contrast ratios
- Focus ring when clickable
Best Practices
- Use Tag for static categories
- Use Chip when users need to remove the label
- Use Badge for status indicators
- Keep text very short
Related Components
- Chip — Removable / interactive version
- Badge — Status-oriented labels
Next: Quote →