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.
An avatar is a visual representation of a user or entity.
An avatar group displays a number of avatars grouped together in a stack or grid.
A badge is a visual indicator for numeric values such as tallies and scores.
A banner displays a prominent message at the top of the screen.
Breadcrumbs are a navigation system used to show a user's location in a site or app.
A button triggers an event or action. They let users know what will happen next.
A checkbox is an input control that allows a user to select one or more options from a number of choices.
Code highlights short strings of code snippets inline with body text.
Date time picker
A date time picker allows the user to select an associated date and time.
A dropdown menu displays a list of actions or options to a user.
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 dis ...
A form allows users to input information.
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 lozenge is a visual indicator used to highlight an item's status for quick recognition.
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 b ...
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
A progress bar displays the status of a given process.
A progress indicator shows the user where they are along the steps of a journey.
A progress tracker displays the steps and progress through a journey.
A radio input allows people to select only one option from a number of choices. Radio is generally displayed i ...
A range lets users choose an approximate value on a slider.
A section message is used to alert users to a particular section of the screen.
Select allows users to make a single selection or multiple selections from a list of options.
A spinner is an animated spinning icon that lets users know content is being loaded.
Tabs are used to organize content by grouping similar information on the same page.
A tag labels UI objects for quick recognition and navigation.
A tag group controls the layout and alignment for a collection of tags.
A text area lets users enter long form text which spans over multiple lines.
A text field is an input that allows a user to write or edit text.
A toggle is used to view or switch between enabled or disabled states.
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.