Badge
Wraps content with an animated corner status dot — toggle show, position, highlight color, and dot diameter.
Badge wraps any child and optionally paints a decorative status dot on a corner. The child stays fully interactive. Common hosts are Avatar, IconButton, or Chip. show toggles the dot and the radial mask cutout; position picks the corner (top-end by default).
color maps to a foundation highlight token; size sets the dot diameter. Enter and exit animate the hole and dot in sequence, and the motion collapses immediately when prefers-reduced-motion is on. The dot is decorative: pair it with visible copy or an accessible name on the wrapped control when the status matters to everyone.
When to use
- Unread, online, or attention cues on an existing control
- A corner glyph that should animate in and out with
show
When not to use
- A labeled status pill in a row → Chip
- Help text that must be readable on its own → Tooltip or body copy
Related
- Chip — compact labeled status
- Avatar — common host for presence dots
- IconButton — common host for unread dots
Common examples
Presence on a host
Wrap an Avatar and toggle show when presence changes. Default corner is top-end. The dot is decorative — keep status in nearby copy or a labeled control.
Unread on IconButton
The IconButton keeps aria-label. Other corners exist; reach for them only when the default top-end collides with the host.
Ask your agent
Show a green online dot on Lara's avatar. Add a nearby Online switch that shows and hides the dot. The dot is decoration — the switch label carries the status.Last updated on