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.

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.

Tile

A tile groups information into an interactive element to let users browse and take action on a group of related items.

TileGroup

A TileGroup groups Tiles to let users browse and take action on a group of related items.

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.

Tabs

Tabs are used to organize content by grouping similar information on the same page.

overlays

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.

pickers

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.

Callout

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.

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.