Component List

A list of all the components available in the design system.

layout

Flex

A flex component is used to create a flex container.

Grid

The grid component is used to create a grid container.

Inline

An inline component is a layout primitive used to arrange elements horizontally.

Stack

A stack component is a layout primitive used to arrange elements vertically.

buttons

Button

A button allows a user to initiate an action.

ButtonGroup

A button group handles the spacing and orientation for a grouping of buttons.

LinkButton

A LinkButton looks like a button but behaves like a link.

collections

ListBox

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

forms

Checkbox

A checkbox allows the user to select an option.

CheckboxGroup

A checkbox group handles the spacing and orientation for a grouping of checkboxes, as well as providing a label.

Form

Forms are used to gather information from the user.

NumberField

A number field is a specialized input that allows a user to enter a number.

PasswordField

A password field is a specialized text field that allows a user to enter a password.

RadioGroup

A radio group is used to group related options together.

SearchField

A search field is a specialized text input allowing the user to perform a search.

Switch

A switch is used to quickly switch between two possible states.

TextArea

A text area serves as a multi-line, plain-text editing interface.

TextField

A text field allows a user to enter a plain text value.

icons

Icon

An icon component is used to render a custom icon.

IconList

An IconList encapsulates a collection of icons.

RichIcon

A rich icon component is used to render a rich custom icon.

Accordion

An Accordion is a grouping of related disclosures. It supports both single and multiple expanded items.

Disclosure

The disclosure component is used to put long sections of information under a block that users can expand or collapse.

Link

A link allows a user to navigate to a different location.

overlays

A popover displays additional content when a user interacts with a trigger element.

pickers

SegmentedControl

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.

ComboBox

A combo box allows the user to make a selection from a list of suggested, likely or desired values.

Select

A select displays a collapsible list of options from which the user can select one.

status

Badge

A badge is used to bring attention to an element.

FloatingBadge

A floating badge allows the user to position a badge relative to another component.

Spinner

A spinner indicates that a part of the product is currently performing a task of unknown duration.

content

Avatar

An avatar is used to represent a user, team or another entity.

Card

Cards are used to group similar concepts and tasks to make it easier for users to scan, read and get things done.

Divider

A divider separates sections of content or groups.

Heading

A heading is a primitive component matching Hopper's typography type scale.

IllustratedMessage

An illustrated message display an image and a message, usually for an empty state or an error page.

Image

An image component that can be used to display images.

Label

A label is a primitive component matching Hopper's typography type scale.

Text

A text component is a primitive component matching Hopper's typography type scale.

placeholders

Content

A placeholder for the main content section of a component.

A placeholder for a footer section.

A placeholder for an header section.

internal parts

ErrorMessage

An error message displays validation errors for a form field.

HelperMessage

A helper message component displays auxiliary text to guide users in the interface.