Chip
Compact interactive labels for filters, tags, and selections — supports dismissible and selectable modes.
Frontend
API
All inputs and configuration options for zyra-chip.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'purple' | 'default' | Color and semantic meaning |
size | 'sm' | 'md' | 'lg' | 'md' | Physical size of the chip |
dismissible | boolean | false | Shows a × button to remove the chip |
selectable | boolean | false | Enables toggle-selection state |
selected | boolean | false | Current selected state (two-way bindable) |
disabled | boolean | false | Prevents interaction |
dismissed (output) | void | - | Emits when the × button is clicked |
selectedChange (output) | boolean | - | Emits the new selected state when toggled |
Tokens
CSS custom properties zyra-chip reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Default background--zyra-color-chip-default-bg | var(--zyra-color-surface-inset) | Fill color of the default (neutral) variant. |
Default text--zyra-color-chip-default-text | var(--zyra-color-foreground-muted) | Label color of the default variant. |
Default border--zyra-color-chip-default-border | var(--zyra-color-border-color) | Border color of the default variant. |
Success background--zyra-color-chip-success-bg | var(--zyra-color-success-subtle) | Fill color of the success variant. |
Success text--zyra-color-chip-success-text | var(--zyra-color-success-foreground) | Label color of the success variant. |
Success border--zyra-color-chip-success-border | var(--zyra-color-success-border-color) | Border color of the success variant. |
Warning background--zyra-color-chip-warning-bg | var(--zyra-color-warning-subtle) | Fill color of the warning variant. |
Warning text--zyra-color-chip-warning-text | var(--zyra-color-warning-foreground) | Label color of the warning variant. |
Warning border--zyra-color-chip-warning-border | var(--zyra-color-warning-border-color) | Border color of the warning variant. |
Danger background--zyra-color-chip-danger-bg | var(--zyra-color-danger-subtle) | Fill color of the danger variant. |
Danger text--zyra-color-chip-danger-text | var(--zyra-color-danger-foreground) | Label color of the danger variant. |
Danger border--zyra-color-chip-danger-border | var(--zyra-color-danger-border-color) | Border color of the danger variant. |
Info background--zyra-color-chip-info-bg | var(--zyra-color-info-subtle) | Fill color of the info variant. |
Info text--zyra-color-chip-info-text | var(--zyra-color-info-foreground) | Label color of the info variant. |
Info border--zyra-color-chip-info-border | var(--zyra-color-info-border-color) | Border color of the info variant. |
Purple background--zyra-color-chip-purple-bg | var(--zyra-color-purple-subtle) | Fill color of the purple variant. |
Purple text--zyra-color-chip-purple-text | var(--zyra-color-purple-foreground) | Label color of the purple variant. |
Purple border--zyra-color-chip-purple-border | var(--zyra-color-purple-border-color) | Border color of the purple variant. |
Selected background--zyra-color-chip-selected-bg | var(--zyra-color-primary-subtle) | Fill color when selectable and selected. |
Selected text--zyra-color-chip-selected-text | var(--zyra-color-primary) | Label color when selectable and selected. |
Selected border--zyra-color-chip-selected-border | var(--zyra-color-primary) | Border color when selectable and selected. |
Selectable ring--zyra-color-chip-selectable-ring | var(--zyra-color-primary-subtle) | Ring shadow shown on hover/focus when selectable. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Dismissible chips include a visually-hidden "Remove" label on the × button
- Selectable chips use aria-pressed to communicate toggle state
- Use a group element with role="group" and an aria-label when listing multiple chips