Actions
- ButtonButtons are elements to trigger most UI interactions, such as submitting forms.
- Icon button
- Link
- Back-to-top button
- Skip link
- Action signifierThe action signifier is a visual cue to the user that they can interact with a component.
- Interactive overlayThe interactive overlay provides a way to make content interactive.
Selection and input
- ChipA chip is used for selecting or filtering and always occurs in a set of multiple chips.
- Checkbox
- Radio button
- Switch
- Selection tile
- Dropdown
- Text field / text area
- Search fieldThe search field component is a component to provide search functionality.
- Auth fieldThe auth field is a variation of the text field. It allows users to mask and reveal input.
- Form groupThe form group groups multiple form elements, such as text fields, radio buttons or checkboxes, together in a container and provides a shared aria label, hint or error for them.
Feedback and status
Content and containers
- CardA card is an interactive container that contains content that is related.
- Block
- Media object card
- Promo card
- Paper card
- Row
- Divider
- Chat bubbleThe chat bubble presents an individual message within a conversation, providing optional contextual details such as the sender’s name, date, and time to help users understand who said what and when.
Disclosure and overlays
- SheetThe sheet component is a modular overlay designed to display additional information.
- Accordion
- Expander
- Popover
- Tooltip
- ToggletipThe toggletip provides additional context when a user taps on an element.
- Focused dialogThe focused dialog maximizes the users' focus on a task. It is used within dialog siteframe.