Tag
Labels content for categorizing or filtering, and can be dismissed.
Filter
Variants
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Variants
5 examplesDefault
Filtersm
Filtermd
Filterlg
Accent
Filtersm
Filtermd
Filterlg
Warning
Filtersm
Filtermd
Filterlg
Fault
Filtersm
Filtermd
Filterlg
Dismissible
Filtersm
Filtermd
Filterlg
States
3 examplesClose hover
FilterRest
FilterClose hover
Close focus visible
FilterRest
FilterClose focus visible
Close pressed
FilterRest
FilterClose pressed
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default'|'accent'|'warning'|'fault' | 'default' | One of: default, accent, warning, fault. |
| size | 'sm'|'md'|'lg' | 'sm' | Rung on the LABEL ladder: 20, 24 or 28px tall (not the 28/32/40 control ladder). Defaults to sm because a tag usually sits inline rather than in a control row; pass md or lg to line it up beside a field or button of that size. |
| children | React.ReactNode | - | Content rendered inside the component. |
| onClose | () => void | - | When provided, renders a close button. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
AI Canvas