✍️ Badge
Updated 2026-05-14
Confidence anatomy low variants medium motion medium a11y high content high
Overview
Section titled “Overview”Small status or numerical indicator (e.g., “Active”, “New”, “+5”). Use for counts or short, non-interactive status labels.
Anatomy
- 1 Containerthe bounding surface — frames the data presentation
- 2 Title or heading (optional)identifies what the data represents
- 3 Primary contentthe data itself — text, value, chart, table cells, badge label
- 4 Supporting metadata (optional)timestamps, units, counts, attribution
- 5 Visual indicator (optional)color dot, icon, badge, or status pill
- 6 Action affordance (optional)expand, drill-in, dismiss, or copy
Variants
| Type |
|---|
Number |
Dot |
Motion
Skeleton Loading
rows/cards reveal with skeleton placeholders during load
Staggered Entrance — Lists, Table Rows, Search Cards
lists, tables, search-result-cards enter with staggered fades
Accordion (expand/collapse)
Slug: accordion-expand-collapse
collapsible cards/sections expand at the accordion pace