Data Display
Chip
A compact tag for a keyword or filter. Make it selectable with clickable, or add a remove button with onRemove.
ReactVueWeb Components
View in Storybook Playground
Examples
<Chip status="info">React</Chip>
<Chip clickable selected onClick={toggle}>絞り込み</Chip>
<Chip onRemove={() => remove(id)}>ada@example.com</Chip>Props
| Name | Type | Default | Description |
|---|---|---|---|
status | ChipStatus | neutral | Semantic color. @default 'neutral' |
small | boolean | false | Smaller size. @default false |
selected | boolean | — | Selected/active (e.g. a filter chip). Renders a solid fill + `aria-pressed`. |
clickable | boolean | — | Make the whole chip a toggle button. Ignored when `onRemove` is set. |
onRemove | () => void | — | When provided, renders a trailing remove button that calls this handler. |
removeLabel | string | Remove | Accessible label for the remove button. @default 'Remove' |
children | ReactNode | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.