The accordion component delivers large amounts of content in a small space through progressive disclosure. That is, the user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
Alerts provide contextual information adjacent to items on the visible page. There are four types: error, warning, success, or informational.
Badges are labels which hold small amounts of information.
The breadcrumb component is a secondary navigation pattern that shows hierarchy among content or traces a user’s path.
Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.
Cards provide a set of content which acts as an entry point to more detailed information.
Checkboxes are used for a list of options where the user may select multiple options, including all or none.
Chips are compact elements that represent an input, attribute, or action. Chips should appear dynamically as a group of multiple interactive elements. Unlike buttons, which should be a consistent and familiar call to action, one that a user expects to appear as the same action in the same general area.
Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus. Their use as menus can be seen in tabs. At a smaller screen size, the tabs collapse into a dropdown.
Allows users to upload single or multiple files to the application by dragging and dropping.
Input boxes gather information from users. Labels sit atop these elements.
A list can be used to display content related to a single subject.
Messages provide the user with contextual static information. They have a lower priority than an alert.
Modals gather information, complete a subtask, or provide additional information without losing the context of an underlying page.
The navbar provides context through globally accessible menu options.
Pagination affords navigation between pages of content, and it highlights which page is currently in view.
Progress indicators express an unspecified wait time or display the length of a process.
Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option.
Range Sliders select a numeric value, or range of values, by moving a handle, or set of handles, along a bar. The slider in its basic form should be accompanied by a label and a number input that doubles as a display for the slider’s current value.
Spinners indicate progress by showing users a loading state.
Switches are used to toggle functionality.
Tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan, so that users can look for patterns and insights.
Tabs are used to quickly navigate between views within the same context. They serve as a form of navigation between related content.
Toasts are types of alerts.
Tooltips provide a short description of a page element or control.