Components
This is the system entry point. For each component, explicitly choose the implementation you want to view. The catalog shows all four outputs and their status; only those with a usable contract and page behave as links.
Actions
Components that start or confirm an action.
- ButtonTriggers actions, confirms decisions, and advances processes with clear hierarchy.
Content and structure
Elements used to organize, separate, and present information.
- AvatarRepresents a person or organization with an image, initials, or fallback.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactUnavailable
- AngularPlanned
- CardGroups related content and actions within a bounded surface.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactBeta
- AngularBeta
- DividerSeparates content regions without introducing a new surface.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactBeta
- AngularBeta
- TableOrganizes related data in rows and columns with semantic headers.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactUnavailable
- AngularPlanned
Input and selection
Controls used to collect, edit, and select data.
- CheckboxAllows selecting zero, one, or multiple independent options.
- ComboboxFilters a list of options and lets people select a value with keyboard or pointer.
- Form FieldComposes label, control, help, and error content into an accessible field.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactBeta
- AngularPlanned
- Input TextCollects short text, structured data, or single-line values.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactBeta
- AngularBeta
- RadioAllows choosing exactly one option among related alternatives.
- SelectSelects a single value from a known list without a search field.
- TextareaCollects free-form text that may span multiple lines.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactBeta
- AngularBeta
- ToggleImmediately switches a setting between on and off.
Feedback and status
Components that communicate outcomes, progress, or status.
- AlertCommunicates information, confirmation, warning, or error within the current flow.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactBeta
- AngularBeta
- BadgeIdentifies status or short metadata next to related content.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactBeta
- AngularBeta
- SkeletonTemporarily represents content structure while data is loading.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactBeta
- AngularPlanned
- SpinnerIndicates indeterminate progress for an operation in progress.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactBeta
- AngularPlanned
- ToastConfirms outcomes and communicates transient feedback without interrupting the current flow.
Navigation
Patterns used to orient movement and location in a product.
- BreadcrumbShows the current position in a hierarchy and links to previous levels.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactUnavailable
- AngularPlanned
- MenuOffers a short list of contextual commands from a Button.
- PaginationDivides long collections and moves between result pages.
- HTML/CSS/JSStable
- Ark/ZagPlanned
- ReactUnavailable
- AngularPlanned
- TabsSwitches related panels in the same context with predictable selection and keyboard behavior.
Overlay and disclosure
Components that reveal contextual content or a new interface layer.
- AccordionOrganizes related content into sections that can be expanded or collapsed.
- ModalInterrupts the flow for a decision or task requiring focused attention.
- PopoverDisplays concise contextual content anchored to a trigger without interrupting the rest of the page.
- TooltipDisplays a brief visual label when a trigger receives hover or focus.