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';
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 treatment: `filled`, `outlined`, or `ghost` (legacy `solid` / `outline` / `subtle` accepted). |
severity | SenseBadgeSeverity | 'primary' | Semantic colour role. |
size | SenseBadgeSize | 'md' | Badge scale token. |
pill | boolean | false | Fully-rounded pill shape. |
dot | boolean | false | Dot-only status indicator (no text). |
decorative | boolean | false | Hides the badge from assistive tech (purely decorative). |
label | string | null | null | Accessible name override — set this when in `dot` mode. |
Accessibility
- Dot badges expose
role="status"and polite live region semantics. - Set
labelin dot mode for explicit announcements. - Non-interactive badges omit
tabindex; decorative badges setaria-hidden="true".