displaytexulinot agent-emittableapp
Badge
badge
A compact status or category label.
Live examples
Success badge
Success badge
Loading demo…
Labelled badge
Labelled badge
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
variant | enum (default, secondary, outline, success, warning, destructive, info, neutral) | no | "default" | — |
label | string | no | — | Plain-text badge word, escaped; replaces children when both are given |
class | string | no | — | — |
children | slot | no | — | The badge word (an inline-text node in a tree) |
Keyboard
| Key | Action |
|---|---|
a | Never convey meaning by color alone; pair with a word. |
a | In 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.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
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)