All components
Tag
Compact labels for filtering and metadata with subtle, solid, outline, and surface variants.
StyleX
Variants
StyleXsubtle
StyleXsolid
StyleXoutline
StyleXsurface
Sizes
StyleXsm
StyleXmd
StyleXlg
StyleXxl
Install
zsh — tag
1bunx stylexblocks add tagUsage — Base UI
tag.tsx
1234567891011121314151617import { Tag } from "#components/ui/base-ui/tag.tsx";
export function Example() { return ( // variant/size resolve once on Root; parts inherit them via context and // Root exposes data-variant / data-size attributes <Tag.Root variant="subtle" size="md"> <Tag.Label>StyleX</Tag.Label> <Tag.CloseTrigger onClick={remove} aria-label="Remove tag"> <CloseIcon /> </Tag.CloseTrigger> </Tag.Root> );}
// slots for adornments: <Tag.StartElement> / <Tag.EndElement> size icons// and avatars to the tag's scale