Chip

Compact labels for tags, filters, and selections. Removable ones leave with an event, not silence.

Variants

AlphaAccentSuccessWarningDangerInfo

<Chip>Alpha</Chip>
<Chip variant="accent">Accent</Chip>

BetaGamma

<Chip removable itemLabel="Beta">Beta</Chip>

AlphaAccentSuccessDanger

<Chip style="outline">Alpha</Chip>
<Chip variant="accent" style="outline">Accent</Chip>

document.addEventListener("ink:chip:remove", (event) => {
  console.log("chip-removed " + event.detail.text);
});

Prop	Type	Default	Description
`variant / size`	`6 variants / sm \| md`	`neutral / md`	Look and size.
`style`	`solid \| outline \| soft`	`solid`	Fill treatment (soft inherits the tint).
`href`	`string`	-	Renders a link chip.
`removable`	`boolean`	`false`	Shows the × button.
`itemLabel`	`string`	-	Names the item in the remove button label.