Preview Only: These components are for reference only. Continue using Orbiter in production until further notice.
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 LinkButton looks like a button but behaves like a link.
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.
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.
An icon component allow you to render a custom icon.
An IconList encapsulates a collection of icons.
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.
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 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.