Chip
Type Toggle
Preview
index.tsxneutralaccent
neutralaccent
neutralaccent
smallmediumlarge
DisabledDisabledDisabledDisabled
Type Dropdown
Preview
index.tsxOptions
neutralaccent
neutralaccent
smallmediumlarge
DisabledDisabledDisabledDisabled
Multi Filter (toggle)
Preview
index.tsxToyotaFordMazdaVinfastMercedesBMW
ToyotaFordMazdaVinfastMercedesBMW
Dropdown menu (Dropdown)
Preview
index.tsxSelect
Preview
index.tsxSelect
Design Tokens for Chip
| Token | Color for | State/Meaning |
|---|---|---|
| --par-color-text-chip-<kind>-<state>-color-<status> | Chip text color | kind: outlined/glass, state: selected/unselected, color: neutral/accent, status: enabled/hovered/pressed/disabled |
| --par-color-bg-chip-<kind>-<state>-color-<status> | Chip background | kind, state, color, status as above |
| --par-color-border-chip-<state>-color-<status> | Chip border | state: selected/unselected, color, status as above |
Note: Replace
kind,state,color,statuswith the corresponding values: kind = outlined/glass, state = selected/unselected, color = neutral/accent, status = enabled/hovered/pressed/disabled.
Chip API Reference
<Chip />
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Chip label | |
| icon | ReactNode | Icon displayed in the chip | |
| type | 'toggle' | 'dropdown' | 'toggle' | Chip type: toggle or dropdown |
| size | 'sm' | 'md' | 'lg' | 'md' | Chip size |
| kind | 'outlined' | 'glass' | 'outlined' | Visual style |
| color | 'neutral' | 'accent' | 'neutral' | Chip color |
| value | string | number | Chip value | |
| checked | boolean | Checked state (toggle) | |
| defaultChecked | boolean | Default checked state (toggle) | |
| isActive | boolean | Active state (dropdown) | |
| disabled | boolean | false | Disable the chip |
| onChange | function (args: value, checked?, active?) | Callback when state changes | |
| onRemove | function (value) | Callback when remove is clicked (button chip) | |
| ...BaseProps | See Base | Inherits all layout props from Base | |
| ...spanProps | HTMLSpanElement props | All native span props (className, style, ...) |
Note: Chip inherits all props from Base and HTMLSpanElement.