ComponentsBadge

displaytexulinot agent-emittableapp

Badge

badge

A compact status or category label.

Live examples

Success badge

Success badge

Loading demo…

Labelled badge

Labelled badge

Props

Public props for Badge
NameKindRequiredDefaultDescription
variantenum (default, secondary, outline, success, warning, destructive, info, neutral)no"default"—
labelstringno—Plain-text badge word, escaped; replaces children when both are given
classstringno——
childrenslotno—The badge word (an inline-text node in a tree)

Keyboard

Keyboard behavior for Badge
KeyAction
aNever convey meaning by color alone; pair with a word.
aIn a catalog tree, set label (or put the word in an inline-text child).

Accessibility

  • Never convey meaning by color alone; pair with a word.
  • In a catalog tree, set label (or put the word in an inline-text child).

Evidence for badge

Latest committed gates for badge (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/badge · 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

  • Show a short status or category next to a title

Don’t use when

Prefer another component

  • A removable filter (use tag)
  • A toggleable filter chip (use chip)