Overlay

The Alert component is used to show feedback to the user about an action or state.

Alert

The Autocomplete component allow user to type and select from a list of options.

Autocomplete

The Avatar component is used to represent users. And should only be used for users.

Avatar

The Badge and Pill components are labels with a background color.

Badge & Pill

Button

The Checkbox component allows user to select multiple items from a list.

Checkbox

The Combobox component is used for selecting an option from a predefined list of options.

Combobox

The CornerDialog component is used for announcements such as new features and feedback requests.

Corner Dialog

The Dialog component is used to show content on top of an overlay that requires user interaction.

Dialog

The File Uploader component allows users to drag and drop files into a dropzone area (or click to select files from the browser file picker) to upload files.

File Uploader

The Filepicker component is used to select one or multiple files from the file system.

Filepicker

Form Field

The Group component identifies a group of inputs/elements and implements the group WAI-ARIA role.

Group

The Menu component shows a list of actions that user can take.

Pagination

The Popover component shows floating content in relation to a target.

Popover

Portal

Positioner

The Pulsar component is a user education UI used to indicate to a user where they should take a particular action.

Pulsar

The Radio component allows user to select a single item from a list.

Radio

The Search Input component allows user to search via typing in text.

Search Input

The Select component allow user to click and select from a list of options.

Select

The Select Menu component allows selection of multiple items from a dropdown list.

Select Menu

The Sidesheet component is used to show more details about an object.

Side Sheet

The Spinner component is used to indicate a loading state.

Spinner

The Status indicator is used to indicate the status of an item.

Status Indicator

The Switch component is used to switch between two options and the result of the change is immediate.

Switch

Use Tabs to organize your content in logical groupings.

The Table component is used to show all information from a data set.

Table

The Tag Input component allow user to type in multiple values as tags.

Tag Input

The Text Input component allows user to type in text.

Text Input

The Text Area component allow user to type in longer content.

Textarea

The Toaster component is used to show an ephemeral message as an overlay.

Toaster

The Tooltip component is used to show more content of a target.

Components

Overlay

Usage

Example