Chip
Directive for compact selected values, filter tokens, tags, and entity references.
Import the public directives from the published package entrypoint.
import { KuiChip, KuiChipRemove } from '@kikita-labs/ui';kuiChip applies to a span for a static, non-interactive chip, or to a button/a for an interactive chip. Chip represents a chosen value or removable filter; Badge represents status. See the Badge docs when you need a status marker instead.
DesignEngineeringShipped
<div class="basic-chip-example">
<span kuiChip>Design</span>
<span kuiChip appearance="primary">Engineering</span>
<span kuiChip appearance="success">Shipped</span>
</div>Set removable and listen for (removed) to drop a value from a collection. Provide removeLabel with a value-specific name so screen reader users know which chip a given remove button clears.
DesignEngineeringProduct
<div class="removable-chip-example">
@for (tag of tags(); track tag) {
<span
kuiChip
appearance="primary"
removable
[removeLabel]="'Remove ' + tag"
(removed)="removeTag(tag)"
>
<span class="kui-chip-label">{{ tag }}</span>
</span>
}
</div>Use a native button host when the chip itself toggles a filter or selection instead of only removing a value.
<div class="interactive-chip-example">
<button
kuiChip
type="button"
[appearance]="selected() === 'all' ? 'primary' : 'neutral'"
(click)="select('all')"
>
All
</button>
<button
kuiChip
type="button"
[appearance]="selected() === 'open' ? 'primary' : 'neutral'"
(click)="select('open')"
>
Open
</button>
<button
kuiChip
type="button"
[appearance]="selected() === 'closed' ? 'primary' : 'neutral'"
(click)="select('closed')"
>
Closed
</button>
</div>disabled reduces opacity and makes the nested remove action inert. invalid shows the invalid border treatment.
DesignMissing owner
<div class="chip-states-example">
<span kuiChip disabled>
<span class="kui-chip-label">Design</span>
<button kuiChipRemove type="button" aria-label="Remove Design"></button>
</span>
<span kuiChip invalid appearance="danger">Missing owner</span>
</div>Set defaults.chip once for the application or for a subtree. Each option resolves as local input > defaults.chip.<option> > built-in default.
import { provideKikitaUi } from '@kikita-labs/ui';
export const appConfig: ApplicationConfig = {
providers: [
provideKikitaUi({
defaults: {
chip: {
/* options below */
},
},
}),
],
};| Name | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | — | Component size. Takes precedence over the global defaults.size. |
| removeIcon | KuiIconGlyph | — | Icon of the remove button. Takes precedence over defaults.icons.remove. See Structural Icons. |
Set any of these on the component or an ancestor to restyle one part. Each token is optional: when it is not set, the part uses the role or scale token in the default column.
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-chip-bg-primary-hover | CSS custom property | --kui-color-primary-soft-bg-hover | Background, primary hover |
| --kui-chip-border-active | CSS custom property | --kui-color-border-control-hover | Border color, active |
| --kui-chip-border-focus | CSS custom property | --kui-color-focus | Border color, focus |
| --kui-chip-border-invalid | CSS custom property | --kui-color-danger-indicator | Border color, invalid |
| --kui-chip-counter-color | CSS custom property | --kui-color-text-secondary | Counter color |
| --kui-chip-focus-ring-color | CSS custom property | --kui-color-focus | Focus ring color |
| --kui-chip-remove-focus-ring-color | CSS custom property | --kui-color-focus | Remove focus ring color |
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-chip-padding-inline-end-removable | CSS custom property | --kui-space-1 | Padding, inline end removable |
| --kui-chip-padding-inline-xs | CSS custom property | --kui-space-1 | Padding, inline xs |
| --kui-chip-padding-inline-sm | CSS custom property | --kui-space-2 | Padding, inline sm |
| --kui-chip-padding-inline-lg | CSS custom property | --kui-space-3 | Padding, inline lg |
| --kui-chip-avatar-radius | CSS custom property | --kui-radius-full | Avatar corner radius |
| --kui-chip-counter-padding-inline-sm | CSS custom property | --kui-space-2 | Counter padding, inline sm |
Inputs and outputs verified against @kikita-labs/ui v2.0.0 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| appearance | 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Semantic visual treatment mapped to Kikita UI status tokens. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Chip size. sm is the size used inside Select and Combobox controls. Falls back to defaults.chip.size, then the global defaults.size. |
| disabled | boolean | false | Reduces opacity and makes the nested remove action inert. |
| invalid | boolean | false | Shows the invalid border treatment. |
| removable | boolean | false | Renders a default remove button (crossmark icon) as the last child. Primary way to make a chip removable; use kuiChipRemove instead only for a custom icon or extra content. |
| removeLabel | string | undefined | 'Remove' | Accessible name for the default remove button rendered by removable. Provide a value-specific label, for example "Remove Design". |
| removed | output: void | - | Emitted when the default remove button or a nested button[kuiChipRemove] is activated. |
| kuiChipRemove | directive on button | - | Marks a native button as the chip remove action. Use only when the default removable button is not enough (custom icon, extra content); do not combine both on the same chip. Needs its own aria-label, for example "Remove Design". |
| --kui-chip-bg | CSS color | - | Chip background color. |
| --kui-chip-bg-hover | CSS color | - | Chip background color on hover for interactive chips. |
| --kui-chip-border | CSS color | - | Chip border color. |
| --kui-chip-text | CSS color | - | Chip label text color. |
| --kui-chip-radius | CSS length | - | Chip corner radius. |
| --kui-chip-height-xs | CSS length | - | Chip block size for size="xs". |
| --kui-chip-height-sm | CSS length | - | Chip block size for size="sm". |
| --kui-chip-height-md | CSS length | - | Chip block size for size="md" (default). |
| --kui-chip-height-lg | CSS length | - | Chip block size for size="lg". |
| --kui-chip-remove-color | CSS color | - | Remove icon color. |
| --kui-chip-remove-color-hover | CSS color | - | Remove icon color on hover. |
| --kui-chip-disabled-opacity | CSS number | - | Opacity applied to the whole chip when disabled. |
| KuiChipOptions | interface | - | Shape of defaults.chip: size and removeIcon (takes precedence over defaults.icons.remove). |
Chip keeps native element semantics instead of adding ARIA roles.
- Use a non-interactive host such as
spanfor a static chip. - Use a native
buttonorafor an interactive chip. - Prefer
removablewith a value-specificremoveLabel, for exampleremoveLabel="Remove Design". Use a projectedbutton[kuiChipRemove]with its own accessible name only when the default button isn't enough; do not combine both on the same chip. - Disabled chips mark the remove button
aria-disabled="true"andtabindex="-1". - Select and Combobox own keyboard behavior for Delete/Backspace selected-value removal; do not duplicate that handling when Chip is used inside those controls.
Consumer-visible changes of @kikita-labs/ui 2.0 for Chip.
- The classes are
KuiChipandKuiChipRemove(they had aDirectivesuffix);ng update @kikita-labs/uirenames the imports.kuiIconButtoninside a chip is nowKuiIconButton. - The size falls back to
defaults.chip.size, and the remove icon todefaults.chip.removeIcon(thendefaults.icons.remove). The remove mark is drawn by the shared structural icon renderer. - The disabled state dims to the shared 0.5 opacity (it was 0.4), the focus ring is a 2px outline, and a pressed chip keeps system colours in forced colors mode.