Small status descriptor for navigation icons and avatars. Part of the Communication family.
<span class="orbit-badge" role="group" aria-label="badge"> <!-- Badge composition: container, content, state layer --> </span>
.orbit-badge {
border-radius: var(--md-shape-corner-20);
background: var(--md-badge-container);
color: var(--md-on-surface);
transition: box-shadow 200ms var(--md-motion-easing-standard);
}
Keyboard: Tab moves focus, Space/Enter activate. Focus ring: 3px outer, 2px offset, --md-primary. Contrast: on-primary on primary ≥ 4.5:1 (WCAG 2.2 AA). Announce state changes with aria-live="polite".
1. Container 2. State layer 3. Content (label / icon) 4. Focus ring. Optional: badge, supporting icon on the end side.
| Property | Type / values | Description |
|---|---|---|
Variant | `filled` · `tonal` · `outlined` · `text` | Visual emphasis of the control. |
Disabled | `boolean` | Removes the control from the tab order and applies the 38% on-surface opacity. |
Size class | `compact` · `medium` · `expanded` | Window-size adaptation; the default resolves from the container. |
Density | `0` – `3` | Progressively tighter vertical rhythm, docked at 36px minimum. |
This component reads
--md-badge-container, --md-on-surface, --md-outline and elevation levels 0–2.
The full reference ships in the token bundle.