Docs / Components
SenseBadgeComponent
Compact status badge from @artificialsenselabs/ui for metadata, counts, and semantic state indicators.
Live demo: run nx serve showcase and open /components/badge (port 4202).
Overview
Category: Feedback / data display. Selector: sense-badge. Import: import { SenseBadgeComponent } from '@artificialsenselabs/ui';
Choose badge for status / counts / metadata (never interactive). Prefer tag for category labels (optional dismiss) and chip for filter / multi-select choices.
API
Generated from libs/ui/src/lib/badge/sense-badge/sense-badge.component.ts — run pnpm run docs:api to refresh.
| Input | Type | Default | Description |
|---|---|---|---|
variant | SenseBadgeVariant | 'filled' | Surface: `filled` | `outlined` | `ghost` (legacy `solid`/`outline`/`subtle` accepted). Badge `ghost` is a soft/tint fill, not the transparent ghost used by tag/chip. |
severity | SenseBadgeSeverity | 'primary' | Semantic colour role (orthogonal to `variant`). |
size | SenseBadgeSize | 'md' | Badge scale token. |
pill | boolean | false | Fully-rounded pill shape. |
dot | boolean | false | Dot-only status indicator — set `label` for a meaningful name. |
decorative | boolean | false | Hide from assistive tech (decorative companion). |
label | string | null | null | Accessible name for `dot` mode. |
Canonical variant values are filled / outlined / ghost. Legacy aliases solid / outline / subtle still normalize at runtime (ADR-0030). Counts are projected content — there is no value input.
Accessibility
- Dot badges expose
role="status"(implied polite live semantics). - Set
labelin dot mode so severity is not colour-only. - Non-interactive badges omit
tabindex; decorative badges setaria-hidden="true".