Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.
A checkbox is an input control that allows a user to select one or more options from a number of choices.
A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
An empty state appears when there is no data to display and describes what the user can do next.
A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.
An inline dialog is a pop-up container for small amounts of information. It can also contain controls.
An inline edit displays a custom input component that switches between reading and editing on the same page.
An inline message lets users know when important information is available or when an action is required.
A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.
A modal dialog displays content that requires user interaction, in a layer above the page.
An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
A utility that hides content from the screen while retaining readability by screen readers for accessibility.
A box is a primitive component that acts as a generic container, and provides managed access to design tokens.
Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
Stack is a primitive component based on flexbox that manages the vertical layout of direct children.