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.
Offer a similar experience as a checkbox or radio with the appearance of a button.
A listbox is a list of interactive options that appears when users interact with an element or perform a specific action.
A menu offers a list of choices to the user, such as a set of actions or functions.
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 tag represents a label, category, keyword, or filter, and can be used for various groupings. If you need multiple tags, consider using the TagGroup component.
A calendar displays one or more date grids and allows users to select a single date.
A date picker allows users to select a single date from a calendar.
A date range picker allows users to select a range of dates from a calendar.
A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
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.
An Alert is a “conversation” between the system and the user. It is prompted when the system needs input from the user or to give the user urgent information concerning their current workflow.
Contextual help shows a user extra information about the state of an adjacent component. It explains a high-level topic about an experience and can point users to more information elsewhere.
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.
Tooltips display additional information upon hover or focus that is contextual, helpful, and nonessential while providing the ability to communicate and give clarity to a user.
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 CompactCallout 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.
Avatars are used to represent a user, a team or another entity in the Workleap ecosystem. They are often paired with text where room is available.
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 illustration compose an image with a background color. Use an illustration as an hero in a modal.
An image component that can be used to display images.
A label is a primitive component matching Hopper's typography type scale.
A paragraph is used to render blocks of text.
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.
A specialized component to represent an HTML anchor element.
A specialized component to represent an HTML address element.
A specialized component to represent an HTML article element.
A specialized component to represent an HTML aside element.
A specialized component to represent an HTML div element.
A specialized button component for HTML button element.
A specialized component to represent an HTML footer element.
A specialized component to represent an HTML header element.
A specialized component to represent an HTML input element.
A specialized component to represent an HTML section element.
A specialized component to represent an HTML img element.
A specialized component to represent an HTML main element.
A specialized component to represent an HTML nav element.
A specialized component to represent an HTML span element.
A specialized component to represent an HTML table element.
A specialized component to represent an HTML ul/ol/li element.
A flexible container component that can render as any HTML element or React component. Supports all styled system props for consistent spacing, layout, and styling.
An error message displays validation errors for a form field.
A helper message component displays auxiliary text to guide users in the interface.
A simple React Aria Popover with hopper's styling