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 — Ark UI
tag.tsx
12345678910111213141516import { Tag } from "#components/ui/ark-ui/tag.tsx";
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via context <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