Chip
import { Chip } from '@tangible/ui';
Interactive docs and examples: Chip in Storybook.
Chip props
| Prop | Type | Default | Description |
|---|---|---|---|
children |
React.ReactNode |
||
as? |
"a" | "div" | "span" |
'span' |
HTML element to render. 'span' (default): Inline element. Use for chips within text flow, inline lists, or inside <p>/<li> elements. 'div': Block element. Use when the chip contains block-level content or needs to be a flex/grid child without inline constraints. 'a': Anchor element. Use for navigational chips with an href. |
className? |
string |
||
disabled? |
boolean |
||
href? |
string |
||
interactive? |
boolean |
||
leftIcon? |
React.ReactNode |
||
onClick? |
React.MouseEventHandler<HTMLElement> |
||
onRemove? |
React.MouseEventHandler<HTMLButtonElement> |
When provided, renders a trailing remove (×) button after the content. The button is a real <button> — the only focusable target in the chip — so the chip body stays non-interactive. Intended for token/tag patterns (MultiSelect, MultiCombobox). Combining onRemove with an interactive chip (onClick or ChipGroup) nests interactive elements and warns in dev. |
|
rel? |
string |
||
removeLabel? |
string |
'Remove' |
Accessible label for the remove button. Pass a specific label like Remove Alice for context. |
rightIcon? |
React.ReactNode |
||
selected? |
boolean |
||
size? |
"lg" | "md" | "sm" | "xs" |
'md' |
|
target? |
React.HTMLAttributeAnchorTarget |
||
theme? |
"danger" | "primary" | "secondary" | "success" | "warning" |
'secondary' |
|
value? |
OptionValue |
When inside ChipGroup, identifies this chip for selection tracking | |
variant? |
"default" | "flush" | "ghost" | "outline" | "solid" |
'default' |
Also accepts the standard attributes of HTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.
Examples
Stories: Basic, With Icon, Icon Placement, As Link, Themes, Variants, Sizes, Interactive, Disabled, Selected / Pressed, Icon Only, Removable (token row), Removable (themes & sizes) (interactive page).
Component API tokens
Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.
--tui-chip-bg--tui-chip-fg--tui-chip-border--tui-chip-icon--tui-chip-icon-scale--tui-chip-radius--tui-chip-selected-ring--tui-chip-icon-slot-bg--tui-chip-icon-slot-fg