Tag
Short label or category marker..
Properties
| Property | Attribute | Description | Type name | Type | Default |
|---|---|---|---|---|---|
variant | variant | Variant reserved for future styling; not used yet. | string | undefined | string | undefined | — |
Slots
| Name | Description |
|---|---|
default | Tag text or other slotted content |
Usage
Use the Tag component to:
- Indicate status or progress (e.g., “Pending,” “Approved”)
- Highlight categories or types (e.g., “Admin,” “User”)
- Draw attention to new or updated content (e.g., “New”)
- Help users filter or identify items by type in lists, cards, or other grouped components
Other Considerations
- Concise Wording: Use one or two words for clear communication (e.g., “New,” “Alert”).
- Consistent Use: Apply tags only where necessary and avoid overuse to prevent visual clutter.
- Positioning: Place tags in consistent positions, such as at the top-right corner of cards or lists, so users can easily scan for information.