Chip — Playground

px
Design
appearance
size
State
html.html
<span kuiChip (removed)="removeTag()">
  <span class="kui-chip-label">Design</span>
  <button kuiChipRemove type="button" aria-label="Remove Design"></button>
</span>
NameTypeDefaultDescription
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.
disabledbooleanfalseReduces opacity and makes the nested remove action inert.
invalidbooleanfalseShows the invalid border treatment.
removedoutput: void-Emitted when a nested button[kuiChipRemove] is clicked.
kuiChipRemovedirective on button-Marks a native button as the chip remove action. Needs its own aria-label, for example "Remove Design".
--kui-chip-bgCSS color-Chip background color.
--kui-chip-bg-hoverCSS color-Chip background color on hover for interactive chips.
--kui-chip-borderCSS color-Chip border color.
--kui-chip-textCSS color-Chip label text color.
--kui-chip-radiusCSS length-Chip corner radius.
--kui-chip-height-xsCSS length-Chip block size for size="xs".
--kui-chip-height-smCSS length-Chip block size for size="sm".
--kui-chip-height-mdCSS length-Chip block size for size="md" (default).
--kui-chip-height-lgCSS length-Chip block size for size="lg".
--kui-chip-remove-colorCSS color-Remove icon color.
--kui-chip-remove-color-hoverCSS color-Remove icon color on hover.
--kui-chip-disabled-opacityCSS number-Opacity applied to the whole chip when disabled.

Inputs and outputs verified against @kikita-labs/ui v1.6.1 public typings.