A flex component is used to create a flex container.
The grid component is used to create a grid container.
An inline compononent 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 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, representing a label, category, keyword, or filter, is designed to be used within a TagList for 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.
An error message displays validation errors for a form field.
Forms are used to gather information from the user.
A helper message component displays auxiliary text to guide users in the interface.
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.
A link allows a user to navigate to a different location.
A popover displays additional content when a user interacts with a trigger element.
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 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.
A divider separates sections of content or groups.
A heading is a primitive component matching Hopper's typography type scale.
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.