ComponentsChip

displaytexulinot agent-emittableapp

Chip

chip

A toggleable filter chip (pressed state).

Live examples

Selected chip

Selected chip

Loading demo…

Props

Public props for Chip
NameKindRequiredDefaultDescription
labelstringyes——
variantenum (default, secondary, outline, success, warning, destructive, info, neutral)no"outline"—
selectedbooleannofalse—
disabledbooleannofalse—
typeenum (button, submit, reset)no"button"—
classstringno——

Keyboard

Keyboard behavior for Chip
KeyAction
aUses aria-pressed for selection; must be a real button.

Accessibility

  • Uses aria-pressed for selection; must be a real button.

Evidence for chip

Latest committed gates for chip (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/chip · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Filter toggles in a toolbar or facet list

Don’t use when

Prefer another component

  • Navigation (use a link)
  • A one-shot action (use button)