Library
Components
50 components in six categories. Each page has live examples where available, rendered states, anatomy, keyboard and pointer interaction, accessibility requirements and usage guidance.
Inputs
Controls that take an action or a value from the person using the product.
| Component | Purpose | ARIA role | Keyboard | Example |
|---|---|---|---|---|
| Button | The main way to trigger an action. Filled gradient with a thin highlight stroke, pill corners, and a leading or trailing icon slot. | button | Tab / Shift+Tab, Enter, Space | Live |
| Icon button | A button with an icon and no label, for toolbars, inline actions and compact density. | button | Tab / Shift+Tab, Enter, Space | Live |
| FAB | Floating action button for the single most frequent action on a screen. Glass overlay and elevated sheen. | button | Tab / Shift+Tab, Enter, Space | Live |
| Toggle button | A segmented control for switching between mutually exclusive views or modes. | group of buttons | Tab, Space / Enter, ← / → | Live |
| Checkbox | Multi-selection control with a clear state hierarchy, including indeterminate for partial selections. | checkbox | Tab, Space, Tab order | Live |
| Radio button | Single choice from a short list. Concentric ring and dot, with a 44px halo for touch. | radiogroup | Tab, ↑ ↓ ← →, Space | Live |
| Switch | A binary on/off control for preferences that apply immediately. Spring-back motion and an inner bevel. | switch | Tab, Space, Enter | Live |
| Input field | Single-line text entry with label, helper text and validation. | textbox | Tab, Typing, Esc | Live |
| Select | Pick one value from a list. Same visual language as Input field. | combobox (native select) | Tab, Space / Enter / ↓, ↑ ↓ | Live |
| Textarea | Multi-line input with a resize handle and helper or error text. | textbox (multiline) | Tab, Enter, Ctrl/Cmd+Enter | Live |
| Slider | Select a value from a continuous or discrete range, with keyboard support. | slider | Tab, ← ↓ / → ↑, Page Down / Page Up | Live |
| Form | Container that organises inputs, switches, radios, checkboxes and actions with uniform spacing. | form | Tab, Enter, Esc | Live |
| Sticky note | A workspace primitive for brainstorming, feedback loops and handovers. | article / note | Tab, Enter | Specs only |
Data display
Components that present people, content and numbers.
| Component | Purpose | ARIA role | Keyboard | Example |
|---|---|---|---|---|
| Avatar | A person or account: photo, initials or placeholder, with an optional status badge. | image | None | Live |
| Badge | A compact signal for status, category or a count. Glass gradient fill with an adaptive stroke. | static text | None | Live |
| Counter | A numeric stepper with clear states, for quantities such as seats. | group with a live value | Tab, Enter / Space, Hold | Live |
| Chip | Filtering, multi-selection and status in one small element, readable at 10px and 12px. | button (toggle) or button | Tab, Space / Enter, Backspace / Delete | Live |
| Cards | The base surface for grouped content: layered shadow, background blur and a gradient stroke. | article | Tab | Live |
| Stat card | A single metric with its label and trend. | description list | None | Live |
| Talent row | A directory row for a person: avatar slot, name, metadata and live sync state. | list item | Tab, Enter | Specs only |
| Collection card | An entry for a folder or collection with cover, permission state and collaborator ring. | article | Tab | Specs only |
| List | The workhorse row: leading asset, stacked text, trailing action. | list | Tab, Enter | Live |
| Table | A data grid for administrative interfaces with head, cell and density variants. | table | Tab, Arrow keys | Live |
| Accordion | Collapsible sections with a chevron and an open content slot. | disclosure | Tab, Enter / Space, ↑ ↓ | Live |
| Tooltip | Short helper text on hover or focus of an interactive trigger. | tooltip | Tab, Esc | Live |
| Image | An image container with an optional caption overlay slot. | image | None | Specs only |
| Icon | A square viewport with optical centring for non-square glyphs. | image or presentation | None | Live |
Navigation
Moving between places, sections and steps.
| Component | Purpose | ARIA role | Keyboard | Example |
|---|---|---|---|---|
| Tabs | Switch between views in the same context, with seven semantic styles. | tablist | Tab, ← →, Home / End | Live |
| Navbar | Primary navigation across a platform: sidebar, collapsed rail and nav items. | navigation | Tab, Enter, Skip link | Specs only |
| Breadcrumb | A path to the current page, with link states. | navigation | Tab, Enter | Live |
| Sidebar | Grouped navigation with section headers and collapse carets. | navigation | Tab, Enter / Space | Specs only |
| Pagination | Step through pages of a long list. | navigation | Tab, Enter / Space | Live |
| Bottom navigation | A navigation bar for iOS and Android with native badges. | navigation | Tab, Enter | Specs only |
Feedback
Telling people what the system is doing.
| Component | Purpose | ARIA role | Keyboard | Example |
|---|---|---|---|---|
| Progress bar | Completion of a sequence, from 0 to 100%. | progressbar | None | Live |
| Stepper | Progress through a multi-step flow with markers, connectors and labels. | ordered list | None | Live |
| Alert | A status message inside the page, in four semantic variants. | alert / status | Tab, Esc | Live |
| Toast | A transient message that does not block the page. | status | Tab, Esc | Live |
| Skeleton | A placeholder that keeps the layout while content loads. | busy region | None | Live |
| Spinner | A waiting indicator for actions and loads. | status | None | Live |
Overlays
Layers that sit above the page and take focus.
| Component | Purpose | ARIA role | Keyboard | Example |
|---|---|---|---|---|
| Dialog | A modal for focused, deterministic decisions with header, content slot and action zone. | dialog (modal) | Tab / Shift+Tab, Esc, Enter | Live |
| Backdrop | The scrim behind overlays. Click outside to dismiss. | scrim | Esc | Live |
| Popover | Lightweight contextual options anchored to a trigger. | dialog (non-modal) | Enter / Space, Tab, Esc | Live |
| Drawer | A side panel for filters, trees and temporary flows. | dialog (modal) | Tab, Esc | Live |
| Bottom sheet | The mobile counterpart of a drawer. | dialog (modal) | Esc, Tab | Live |
| Menu | A contextual list of actions with nested hierarchies and keyboard states. | menu | Enter / Space / ↓, ↑ ↓, Home / End | Live |
Layout
Structure and surfaces that hold other components.
| Component | Purpose | ARIA role | Keyboard | Example |
|---|---|---|---|---|
| Logo | The wordmark and the standalone logomark. | image link | Tab, Enter | Specs only |
| Divider | Separates areas without adding weight. | separator | None | Live |
| Slot | An empty placeholder that hosts other components in a template. | none | None | Specs only |
| Background | The page surface: a deep base with two ambient glows. | none | None | Specs only |
| Page header | The title area of a page. | header / h1 | Tab | Specs only |