Actions and display

Chip

Chip — compact token, optionally selectable (toggle) and/or closeable. When `selectable`, the body is a `<button>` reflecting `selected` via `aria-pressed`. When `closeable`, a labelled remove `<button>` is appended. Both are native buttons, so keyboard activation is built in.

Public export

typescript

import { Chip } from '@happyvertical/smrt-ui/ui';

Import path: @happyvertical/smrt-ui/ui
Props: 9
Props described: 9 of 9
Bindable state: 0
Callback events: 2
Verified release: 0.44.0

Props

NameTypeRequiredDescription

labelstringNoText label; also the close button's accessible name (`Remove <label>`).

childrenSnippetNoChip content; falls back to `label`.

selectablebooleanNoRender the body as a toggle button reflecting `selected`.

selectedbooleanNoSelected state (only meaningful with `selectable`).

closeablebooleanNoAppend a remove (×) button.

disabledbooleanNoDisable both buttons.

sizeChipSizeNoSize variant.

onselect() => voidNoFired when a selectable chip body is activated.

onclose() => voidNoFired when the remove button is activated.

Bindable state

This component has no bindable public state.

Callback events

onselect() => void
onclose() => void

Public export

Props

Bindable state

Callback events

Examples and explanation