Product designDevelopmentRemote
<Chip.Root variant="secondary">
Brand identity design
<Chip.Remove aria-label="Remove Brand identity design" />
</Chip.Root>A chip is something the user put there and can take away; a
Badge is something the data says. Give Chip.Remove an
aria-label naming what it removes — "Remove" alone is useless in a row of six.
API
Chip.Root
| Prop | Type | Default | |
|---|---|---|---|
color | "amber" | "blue" | "cyan" | "emerald" | "fuchsia" | "gray" | "green" | "indigo" | "lime" | "orange" | "pink" | "purple" | "red" | "rose" | "sky" | "slate" | "teal" | "violet" | "yellow" | "zinc" | — | Catalogue palette, for category rather than status. Overrides
variant when both are set. |
size | "default" | "sm" | "default" | sm for dense surfaces such as table cells. Below that, use text. |
variant | "brand" | "default" | "destructive" | "ghost" | "highlight" | "link" | "outline" | "secondary" | "secondary" | Semantic intent, for status: pending, failed, verified. For an
arbitrary category — a tag, a skill, a department — use color. |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <span> prop. Source: chip/components/chip-root.tsx.
Chip.Remove
Plus every <button> prop. Source: chip/components/chip-remove.tsx.