Circle renders a compact circular surface for short numeric counts, initials, or icons when a full Avatar is heavier than the hierarchy warrants. It fills the gap between typographic emphasis and identity photos—common in dense dispatch lists, badges, and map pins.
- You need a small count or two-letter initials in a list cell, chip row, or map marker.
- Visual weight should stay below an avatar but above bare text (queue depth, unread count).
- The circle is decorative or supplementary—identity is still clear from adjacent labels.
- Representing a person or entity with a photo—use
Avatar for image support and avatar-specific accessibility patterns.
- Communicating semantic status (error, warning)—prefer Badge or Status dot with text.
- The marker must be interactive at sub-44px sizes on touch-first flows—grow the target or use
IconButton.
Size and color tokens should match surrounding density; avoid inventing one-off diameters outside the design system.
A circular container with centered text or icon content; may be paired with outlines or semantic color tokens when specified by design.
- Prefer at most two characters for initials; for larger counts use compact numerals and test truncation.
- All labels that describe what the circle represents should live in adjacent text or
title attributes when the glyph alone would be ambiguous.
- If
Circle is interactive, use Interactable or button semantics with an accessible name; purely decorative circles should be marked appropriately for assistive tech.
- Do match circle scale to row height in tables and list rows used across dispatch.
- Do pair counts with visible column headers or legends when color conveys category.
- Don’t rely on color alone for meaning—add text or iconography.
- Don’t stack many overlapping circles in map UIs without legend support.
- Interactive circles need discernible labels; purely informational circles should not spoof button roles.
- Ensure contrast between foreground and background meets WCAG requirements for text inside the circle.
- Avatar for user imagery and entity identity.
- Badge for status and tags.
- Status dot for lightweight state markers.
- Icon when shape alone is sufficient without a circular chrome.
