Chips

--action-color* styles interactive primary text and outlines; theme tokens style passive and solid chips.

Use chips for inputs, attributes or actions. Tag and pill are contextual names; badges show statuses, counts or metadata.

Default

Default chip

<span class="chip">Default chip</span>

Solid

<span class="chip chip-primary chip-solid">
	<span class="chip-label">Primary</span>
</span>

Outline

<span class="chip chip-primary chip-outline">
	<span class="chip-label">Primary outline</span>
</span>

Text

Primary text

<span class="chip chip-primary chip-text">
	<span class="chip-label">Primary text</span>
</span>

Interactive

Use native links or buttons for interactive chips. Reserve .chip-interactive for custom controls with equivalent keyboard behavior.

Interactive chip

<button class="chip chip-primary chip-outline" type="button">
	<span class="chip-label">Interactive chip</span>
</button>

Deletable

<span class="chip chip-primary chip-solid">
	<span class="chip-label">some chip</span>
	<button class="chip-action" type="button" aria-label="Delete some chip">
		<Icon size="sm" aria-hidden="true">
			<CircleXmarkSolidIcon />
		</Icon>
	</button>
</span>

Disabled

<div class="chip chip-primary chip-solid disabled">
	<span class="chip-label">some chip</span>
</div>

CSS Variables

Override these variables on the component or an ancestor.

--chip-color: var(--primary);
--chip-color-hover: var(--primary-hover);
--chip-color-active: var(--primary-active);
--chip-on-color: var(--on-primary);
--chip-surface-color: var(--chip-color);
--chip-surface-color-hover: var(--chip-color-hover);
--chip-surface-color-active: var(--chip-color-active);
--chip-font-size: var(--font-size-sm);
--chip-padding-y: var(--spacer-0);
--chip-padding-x: var(--spacer-2);
--chip-border-radius: 9999px;
--chip-border-width: var(--border-width);
--chip-action-size: 1.5rem;
--chip-highlight: var(--bg-highlight);
--chip-disabled-text-color: var(--disabled-text-color);
--chip-disabled-bg-color: var(--disabled-bg-color);
--chip-disabled-border-color: var(--disabled-border-color);
--chip-transition-duration: var(--transition-duration);
--chip-transition-easing: var(--transition-easing);