Button
Filled, tonal, outlined and text actions in three sizes, with optional leading icons and loading state.
Open playgroundIcon Button
A single-action glyph button in three types and two sizes, with a full state ladder and an aria-label accessible name.
Open playgroundTop App Bar
Screen-anchoring bar with leading nav, headline and up to three actions — two elevations across three sizes, with layout-state and accessibility specs.
Open playgroundInput Field
Outlined text field in two variants and three sizes, with label, AI tag, helper text, leading / trailing icons and a full state-and-validation ladder.
Open playgroundChips
Assistive AI-action chip and the compact selectable filter chip, across the full state ladder — with leading icon, removable ×, label and a live token inspector.
Open playgroundTag
Eleven type variants across four size rhythms — AI, status, outline, and chip — with an optional leading icon. Covers the full inline labeling palette with live token inspection and a11y.
Open playgroundDialog
Three modal variants — Basic, Dismissable (close × + header icon + divider), and Overlay (full-screen permission surface) — with interactive states, token inspector, and a11y.
Open playgroundList Item
Flexible 360 px row with optional leading (icon, checkbox, radio, switch), a three-line text stack, and optional trailing slot — across all five interaction states with live tokens and a11y.
Open playgroundSelection Controls
Checkbox, radio and switch across the full selected × enabled/disabled matrix, with reconstructed interaction states, a live token inspector, anatomy and the role/aria gaps a host must close.
Open playgroundSection Card
Collapsible, numbered card wrapping one listing-flow section — step badge (Upcoming / Current / Complete), optional supporting text, chevron action, and an expandable content body.
Open playgroundMenu
A 208 px-wide elevated surface listing a set of actions — anchored to an overflow trigger. Leading icon, trailing icon, label, and five interaction states across three and five item configurations.
Open playgroundBadge
Alert-red count pill and presence dot, anchored to the top-right of a host icon — across the full content range from a single digit to the 99+ overflow cap, with live tokens and a11y.
Open playgroundNavigation
Bar, rail and drawer surfaces that move people across the app — one tonal-pill selection language, the full interaction-state ladder, per-surface token inspector, anatomy and a11y. Renders the real bundled component.
Open playgroundSnackbar
Brief confirmation on the inverse surface — text only or text & action, one or two lines, with an optional close. The eight Figma configurations, forced interaction states, live token inspector and a11y. Renders the real component.
Open playgroundStep
The numbered step badge — upcoming / current / completed, ± selected — and the two steppers built from it. One configuration applied to the atom, Steps Vertical and Steps Horizontal at once, with progress grid, live tokens and a11y. Renders the real components.
Open playgroundLinear Progress Indicator
The indeterminate 4px sweep for unknown-duration work — the real width + label API, both motion modes (sweep and the built-in reduced-motion pulse) across four widths, with live tokens, anatomy and a11y. Gaps flagged, never faked.
Open playgroundCircular Progress Indicator
The determinate ring that fills clockwise for compact, inline progress — the real value + size + label API, the full Figma progress ladder across four diameters, with live tokens, anatomy and a11y. Gaps flagged, never faked.
Open playgroundProgress Bar
The determinate, segmented bar for countable progress — the real segments + value + width + label API, with the fill ladder, every segment count × width, fractional partial fills, live tokens, anatomy and a11y. Gaps flagged, never faked.
Open playgroundUpload Progress
The 64px circular photo-upload overlay — idle, the 13-petal uploading ring, done and error across three sizes, with the real state + value + size + label API, live tokens, anatomy and a11y. Renders the real components; gaps flagged, never faked.
Open playgroundSide Sheet
The docked 320px (max 400) edge panel with a flexible content slot — slot affordance, filled form and filter presets across both width bands, plus back arrow, action bar and forced control state-layers. Renders the real component; the slot story, width and fixed glyphs flagged, never faked.
Open playgroundBottom Sheet
The bottom-anchored surface that slides up with a flexible content slot — slot affordance, action menu and picker presets across docked and modal (scrim) presentations, both width bands, drag handle and scrolling body. Renders the real component; the slot story, width and fixed handle flagged, never faked.
Open playgroundTooltip
The brief plain-text label on the inverse surface with a beak — single and multi line across all four beak positions, with live token inspection, anatomy and a11y. Renders the real component; the absent size, state and icon props flagged as gaps, never faked.
Open playground