Tag
Tag is a compact element that represents an input, attribute, or action.
Contained Variant
Medium Size
Default
Selected
With Icon
Small Size
Default
Selected
With Icon
Text Only Variant
Medium Size
Default
Selected
With Icon
Small Size
Default
Selected
With Icon
Dot Variant
New dot variant with colored indicator for status displays.
Medium Size
Default
Success
Warning
Error
Info
Small Size
Default
Success
Warning
Error
Info
Color Variants
Contained tags with color prop display white text in light theme for better contrast.
Contained with Colors
Default
Success
Warning
Error
Info
Text Only with Colors
Default
Success
Warning
Error
Info
Interactive (Clickable)
Click me
Filter
Remove
With Second Label
Add a secondary text below the tag label for additional context (center aligned).
Premium$9.99/mo
PopularBest value
NewJust added
interface TagProps {
variant: 'contained' | 'textOnly' | 'dot';
size: 'medium' | 'small';
state?: 'enabled' | 'selected';
color?: 'default' | 'success' | 'warning' | 'error' | 'info';
label: React.ReactNode;
secondLabel?: string; // Secondary text below tag label (center aligned)
iconName?: keyof typeof Lucide icon;
onClick?: React.MouseEventHandler<HTMLDivElement>;
}