Components
Accordion
Accordions are a list of headers that expand and collapse to reveal hidden content blocks. They help reduce scrolling, and shorten pages.
Action menu
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.
Badge
A badge is a visual label or indicator used to convey status or highlight content.
Blockquote
A blockquote is a quotation with a citation, designed to be offset from the main text on a page.
Breadcrumb
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.
Button
Buttons are used to initiate actions within an application, website, or other digital experience. Their labels clearly describe the action they trigger.
Card
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.
Checkbox
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.
Date picker
A date picker allows a user to specify a date through a text input or expandable calendar menu.
Divider
A divider is a thin line placed either horizontally or vertically between elements.
Drawer
A drawer is a secondary content component that sits off-screen until triggered by the user.
Dropdown
Dropdowns present users with a list or menu of options. Users can filter these options and select multiple options concurrently.
File input
File input is an interactive field that allows users to select files. It’s commonly used in form patterns.
Footnote
A footnote provides additional information or a source for content in the main body of a page.
Link
Links are interactive elements that allow users to navigate to a new page or website, or jump to a section of the current page.
Loading indicator
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 bar
Message bars are nonmodal semantic dialogs that can be displayed at the top of the page or contextually within a task flow.
Modal
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.
Notification
A notification is nonmodal dialog. It shows users contextual, timely, and noncritical feedback and messages.
Overlay
An overlay is a temporary transparent layer that covers page content, shifting focus to a new content element.
Pagination
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
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 bar
Progress bars are used to convey the duration of system processes, including installation and uploading or downloading files, images, or updates.
Progress tracker
Progress trackers display the user’s location within a multistep process while providing the status of each step.
Radio button
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.
Select
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
Side navigation is a hierarchical, vertical navigation component featured on the right or left side of a page or screen.
Table
A table contains data arranged in rows and columns. They are used to communicate relationships between content and to display references, comparisons, and choices. Features include text inputs, text links, and sorting.
Tabs
Tabs help organize similar types of content on a screen and allow users to move easily between alternate views within the same context.
Tag
Tags are small, interactive labels used to visually group, classify, or filter criteria.
Text area
The text area component is a field for plain-text input, often used in forms.
Text input
Text input is an interactive field that allows users to enter text and data. It's commonly used in form patterns.
Tooltip
Tooltips are containers that temporarily display short, contextual text. They are typically activated when a user hovers over an icon or other trigger.
View more/less
This component is used to hide or reveal content. It saves space while preserving visual balance and maintaining information hierarchy.