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.
A list box displays actions relevant to the user’s current selection.
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 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.
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.
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 image component that can be used to display images.
A label is a primitive component matching Hopper's typography type scale.
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.