Tag
Compact interactive labels used to represent filters, categories, or selected values. Supports leading icons, status dots, country flags, avatars, dismiss buttons, count badges, and checkboxes across three sizes.
Sizes
Three sizes — sm, md, and lg — work across all variant combinations.
Default
LabelLabelLabel
With dot
LabelLabelLabel
With avatar
JS
JS
JS
With count
Pass a count number to show a muted trailing value — useful for filter tags displaying result counts.
Default
Label5Label5Label5
With dot
Label5Label5Label5
With avatar
JS
JS
JS
Dismissible
Pass onDismiss to render a trailing × button. Click to remove from the demo below.
Interactive
DesignDevelopmentMarketingResearchStrategyUX Writing
Sizes
LabelLabelLabel
With avatar
JS
JS
JS
With dot
LabelLabelLabel
With checkbox
Pass a controlled checked value and onCheckedChange to prepend a checkbox. Works with all leading content and trailing variants.
Sizes
LabelLabelLabel
With dot
LabelLabelLabel
With avatar
JS
JS
JS
Checkbox + dismiss
LabelLabelLabel
Checkbox + count
Label5Label5Label5