KikitaUiDocs

Design

host element

appearance

size

label

removeLabel (empty = Remove + label)

State

disabledinvalidremovable

<span kuiChip removable removeLabel="Remove Design" (removed)="removeTag()">
  <span class="kui-chip-label">Design</span>
</span>

No events yet.

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).

Inputs and outputs verified against @kikita-labs/ui v2.0.0 public typings.

Chip — Playground