Actions
Button
Trigger actions and guide users through primary and secondary flows.
Dropdown
Show contextual actions and compact option lists from a trigger.
Data Display
Accordion
Progressively reveal sections of related content without overwhelming the page.
Avatar
Represent a person, account, or entity with an image, initials, or icon.
Badge
Highlight counts, labels, and compact metadata in a small visual container.
Icon
Add visual cues and reinforce meaning in buttons, statuses, inputs, and more.
Status
Communicate system state, semantic meaning, or workflow progress at a glance.
Table
Present structured data in rows and columns with clear scanning patterns.
Tag
Label content, categories, or states with a lightweight visual marker.
Feedback
Alert
Surface important inline messages that need user attention in context.
Dialog
Interrupt the flow when users need to review, confirm, or complete a focused task.
Drawer
Present secondary content or actions in a sliding panel alongside the main view.
Empty State
Explain empty or no-results views and guide users to a next step.
Notification
Communicate important updates inside the interface without blocking progress.
Progress
Show completion state, task advancement, or loading progression.
Spinner
Indicate background activity when a precise progress value is unavailable.
Toast
Deliver brief transient feedback after an action or system event.
Tooltip
Reveal helper text or additional context on hover, focus, or tap.
Form Controls
Checkbox
Let users select one or more options from a set.
Date Picker
Collect dates and times with a structured calendar or time selection flow.
Input
Capture short freeform text, numbers, and common single-line entries.
Radio
Support a single choice from a set of mutually exclusive options.
Select
Expose a controlled list of options when freeform entry is not appropriate.
Slider
Let users choose a value or range along a continuous scale.
Switch
Toggle a setting on or off with a clear binary control.
Textarea
Capture longer multi-line text such as comments or descriptions.
Time Picker
Let users pick a time of day with hours, minutes, and seconds.
Layout
Card
Group related content and actions inside a flexible visual container.
Divider
Separate content areas and reinforce structure without adding heavy chrome.
Page Title
Frame page-level hierarchy with a clear heading and optional supporting content.
Navigation
How to read the rules
Component pages describe requirements with plain “must” and “should”. The Rules table at the end of each page’s Accessibility section labels each rule with an RFC 2119 keyword in capitals.automated links to a test and names what it asserts, assisted names a supporting tool or lint rule, and manual describes a check a reviewer can repeat. A manual entry describes the method; it does not claim the review has already happened.