Components
Accordions are a list of headers that expand and collapse to reveal hidden content blocks. They help reduce scrolling, and shorten pages.
An action menu presents users with additional options when there are space constraints within a layout. It is paired with an image, link, button, or another element that, when selected, opens the action menu.
A badge is a visual label or indicator used to convey status or highlight content.
A blockquote is a quotation with a citation, designed to be offset from the main text on a page.
A breadcrumb is a type of contextual navigation that shows a user’s position within the hierarchy of a site and allows them to navigate back through the site’s levels.
Buttons are used to initiate actions within an application, website, or other digital experience. Their labels clearly describe the action they trigger.
Cards are containers for concise information about a single subject. They can display featured information, related content, or navigational choices. In groups, cards present collections of similar content.
Carousel is a container that enables users to navigate horizontally to view different content placed inside the component.
Checkboxes allow a user to select multiple options from a category. A checkbox can also be used to display a single option that may require additional acceptance or confirmation prior to submission.
A date picker allows a user to specify a date through a text input or expandable calendar menu.
A divider is a thin line placed either horizontally or vertically between elements.
A drawer is a secondary content component that sits off-screen until triggered by the user.
Dropdowns present users with a list or menu of options. Users can filter these options and select multiple options concurrently.
File input is an interactive field that allows users to select files. It’s commonly used in form patterns.
A footnote provides additional information or a source for content in the main body of a page.
Links are interactive elements that allow users to navigate to a new page or website, or jump to a section of the current page.
Lists are used to organize a group of related text elements.
A loading indicator is a visual animation used to convey processing or loading, but does not indicate how long the activity will take to complete.
Message bars are nonmodal semantic dialogs that can be displayed at the top of the page or contextually within a task flow.
A modal is a dialog that intentionally interrupts a user's page experience. It's often used for critical information or for actions that require review or completion prior to returning to the task flow or page.
A notification is nonmodal dialog. It shows users contextual, timely, and noncritical feedback and messages.
An overlay is a temporary transparent layer that covers page content, shifting focus to a new content element.
Pagination divides a collection of data or other content types such as images, cards, or search results into multiple pages showing a fixed number of items per page.
Popover is a container that floats over page content after pressing a trigger element. It contains supplemental content related to its trigger and can be customized to include text, images, and interactions.
Progress bars are used to convey the duration of system processes, including installation and uploading or downloading files, images, or updates.
Progress trackers display the user’s location within a multistep process while providing the status of each step.
Radio buttons require users to make one selection from a group of options. Because the user can select only one option, radio buttons are used to present mutually-exclusive choices.
Search is an input that allows users to look for a specific keyword or phrase and obtain results related to the context in which it is placed.
This component allows users to select an option from a list of five or more choices and generally requires a final submit action to confirm the selection.
Side navigation is a hierarchical, vertical navigation component featured on the right or left side of a page or screen.
A switch allows users to choose between two mutually exclusive settings and is commonly used to control preferences within an application.
A table contains data arranged in rows and columns. They are used to communicate relationships between content and to display references, comparisons, and choices.
Tabs help organize similar types of content on a screen and allow users to move easily between alternate views within the same context.
Tags are small, interactive labels used to visually group, classify, or filter criteria.
The text area component is a field for plain-text input, often used in forms.
Text input is an interactive field that allows users to enter text and data. It's commonly used in form patterns.
Time pickers help users select a specific time or a range of times.
Tooltips are containers that temporarily display short, contextual text. They are typically activated when a user hovers over an icon or other trigger.
This component is used to hide or reveal content. It saves space while preserving visual balance and maintaining information hierarchy.