A list of all the components available in the design system.
A flex component is used to create a flex container.
The grid component is used to create a grid container.
An inline component is a layout primitive used to arrange elements horizontally.
A stack component is a layout primitive used to arrange elements vertically.
A button allows a user to initiate an action.
A button group handles the spacing and orientation for a grouping of buttons.
A LinkButton looks like a button but behaves like a link.
The SegmentedControl component presents a horizontal row of options or actions that are contextually or conceptually related. It allows users to select a single option at a time.
A tile groups information into an interactive element to let users browse and take action on a group of related items.
A TileGroup groups Tiles to let users browse and take action on a group of related items.
Offer a similar experience as a checkbox or radio with the appearance of a button.
A list box displays actions relevant to the user’s current selection.
A menu offers a list of choices to the user, such as a set of actions or functions.
The TagGroup is a dynamic UI component that encapsulates a collection of tags. Each tag represents a label, category, keyword, or filter, and can be used for various groupings
A tag represents a label, category, keyword, or filter, and can be used for various groupings. If you need multiple tags, consider using the TagGroup component.
A checkbox allows the user to select an option.
A checkbox group handles the spacing and orientation for a grouping of checkboxes, as well as providing a label.
Forms are used to gather information from the user.
A number field is a specialized input that allows a user to enter a number.
A password field is a specialized text field that allows a user to enter a password.
A radio group is used to group related options together.
A search field is a specialized text input allowing the user to perform a search.
A switch is used to quickly switch between two possible states.
A text area serves as a multi-line, plain-text editing interface.
A text field allows a user to enter a plain text value.
An icon component is used to render a custom icon.
An IconList encapsulates a collection of icons.
A rich icon component is used to render a rich custom icon.
An Accordion is a grouping of related disclosures. It supports both single and multiple expanded items.
The disclosure component is used to put long sections of information under a block that users can expand or collapse.
A link allows a user to navigate to a different location.
Tabs are used to organize content by grouping similar information on the same page.
An Alert is a “conversation” between the system and the user. It is prompted when the system needs input from the user or to give the user urgent information concerning their current workflow.
Contextual help shows a user extra information about the state of an adjacent component. It explains a high-level topic about an experience and can point users to more information elsewhere.
Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.
A popover displays additional content when a user interacts with a trigger element.
Tooltips display additional information upon hover or focus that is contextual, helpful, and nonessential while providing the ability to communicate and give clarity to a user.
A combo box allows the user to make a selection from a list of suggested, likely or desired values.
A select displays a collapsible list of options from which the user can select one.
A badge is used to bring attention to an element.
A Callout informs users about important changes or persistent conditions. Use this component to communicate to users in a prominent way. Callouts are placed at the top of the page or section they apply to, and below the page or section header.
A floating badge allows the user to position a badge relative to another component.
A spinner indicates that a part of the product is currently performing a task of unknown duration.
An avatar is used to represent a user, team or another entity.
Cards are used to group similar concepts and tasks to make it easier for users to scan, read and get things done.
A divider separates sections of content or groups.
A heading is a primitive component matching Hopper's typography type scale.
An illustrated message display an image and a message, usually for an empty state or an error page.
An illustration compose an image with a background color. Use an illustration as an hero in a modal.
An image component that can be used to display images.
A label is a primitive component matching Hopper's typography type scale.
A paragraph is used to render blocks of text.
A text component is a primitive component matching Hopper's typography type scale.
A placeholder for the main content section of a component.
A placeholder for a footer section.
A placeholder for an header section.
An error message displays validation errors for a form field.
A helper message component displays auxiliary text to guide users in the interface.