Chip

A small token: a pill (filter, label, state) or a rect naming an entity with a glyph or image; removable.

Group: Feedback · Kind: macro · in the lite catalog

Preview

example

Drafts

shape · pill

Drafts

shape · rect

Drafts

tone · neutral

Drafts

tone · primary

Drafts

tone · success

Drafts

tone · warning

Drafts

tone · danger

Drafts

Open in the playground

Platforms

The same specimen painted by React, SwiftUI, Compose and gpui.

Variants

tone · info

Drafts

removable

Drafts

Props

Prop	Type	Required	Bindable	Description
label	string	yes	yes	The chip text.
shape	pill | rect	–	–	A rounded pill or a squarer entity chip. Default "pill".
selected	boolean	–	–	Draws it as the active choice. Default false.
tone	neutral | primary | success | warning | danger | info	–	yes	Colour tone of the chip. Default "neutral".
dot	color	–	–	A colour dot before the text (a label chip).
icon	icon	–	–	An icon before the text.
image	url	–	–	A round picture instead of the icon.
detail	string	–	–	Muted text after the label.
removable	boolean	–	–	Shows a remove control that fires remove. Default false.
pressable	boolean	–	–	Makes it a press target that fires press. Default false.

Events

• on.press: runs an action
• on.remove: runs an action

Slots

• leading: one component by id

Children

none

A2UI basic mapping

No basic catalog component maps here.

Built from

Box · Button · Icon · Image · Text

Accessibility

Role: button

button with aria-pressed (= selected) when pressable, text otherwise ($a11y); remove = button labelled remove

Keys	Action
Enter Space	press; Delete, Backspace: remove when removable

Theming

Recipe parts: Chip/root Chip/dot Chip/image Chip/icon Chip/label Chip/detail Chip/remove

Keyed by: shape selected tone :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

Related

Button · Icon · Image · Text · Badge · Alert · EmptyState · Progress