Components

alert

Alert

Alerts call attention to a semantic message and load alongside the rest of the page content. They can optionally be dismissed upon user action.

button

Button

Buttons with labels represent the most important actions that users frequently trigger. They can vary in prominence and can include an icon.

checkbox

Checkbox

A single Checkbox represents binary choices, such as accepting terms and conditions or activating and deactivating notifications.

checkbox-group

CheckboxGroup

A group of Checkboxes includes five independent choices at most. Each option is binary and they can be listed horizontally or vertically.

collection

Collection

Collection combines a list of items with controls for the view. The list can be a Table and the controls can be a Search, Filters, and Pagination.

confirmation-modal

ConfirmationModal

Confirmation Modals appear after users attempt to trigger an action with an effect that is irreversible or hard to reverse, such as deleting items.

contextual-help

ContextualHelp

Contextual Help is represented by a question mark trigger that is positioned next to an element and displays its definition when clicked.

date-picker

DatePicker

A Date Picker is a field for single date values that may include time. The date can be typed or selected with the help of a Calendar.

date-range-picker

DateRangePicker

A Date Range Picker is a field for date period values that may include time. The date can be typed or selected in a Calendar.

empty-state

EmptyState

An Empty State represents the state of a container, such as when there are no items to display or when the user isn't allowed to access items.

field

Field

Implementation of a fieldset

filter

Filter

Filters represent criteria that users can choose to narrow down a Collection. They can include single or multiple selection.

heading

Heading

Heading is used to define levels of typography

icon-button

IconButton

Icon Buttons represent minor actions in a flow. It includes a label only for accessibility that is not visible, so the icon must be recognizable by itself.

input

Input

An Input is a field for short text values. It can include masks and character restrictions, such as accepting only numbers.

label

Label

Label component

link

Link

Links represent navigation inside a page or between pages, including to pages outside the Admin. They exist within or directly after a text.

menu

Menu

Menus summarize actions in a dropdown. They can include actions that are rarely used, complementary, or repeated for each item in a Collection.

modal

Modal

Modal displays content related to a minor job within a page's main job. It demands complete attention and blocks interactions outside the overlay.

page

Page

The Page structure helps users to easily identify where they are, view content essential to the main job, and perform related actions.

pagination

Pagination

Pagination handles navigation inside a Collection. It displays the number of items, filtered or not, and allow users to navigate between pages.

popover

Popover

Popover containers allow merchants to access and interact with more information of an item through an overlay.

radio

Radio

Radio inputs allow users to select one option from a list. It should be used inside a RadioGroup component.

radio-group

RadioGroup

A group of Radios includes five options at most and only one can be selected at a time. Options can be listed horizontally or vertically.

search

Search

Search is a text input that users can type to narrow down a Collection. Use Filters if values can be classified in predefined options.

select

Select

Select opens a dropdown with between five and seven values for users to choose one. Use Radios for less items or a Combobox for more items.

skeleton

Skeleton

Skeletons compose a low-fidelity representation of content that will load. They appear when the entire page is loading and take up to 5s.

spinner

Spinner

Spinner informs that a specific element in the page is loading or a task is in progress. Use only for request that take over 1s and less than 5s.

tab

Tab

Tabs are used to create up to five views inside a page. Use for related content that is not comparable, when a unified view is not necessary.

table

Table

Table lists items vertically and can include actions for each row. The columns display property values for users to scan, sort, and compare.

tag

Tag

Tags differentiate items through a read-only text value in a colored bg. They can be secondary or primary, given their relevance to the main job.

text

Text

Text component

textarea

Textarea

Text Area is a field for text values that can take up more than one line in a form, such as descriptions or comments.

time-input

TimeInput

A Time Input is a field for a single time value.

toast

Toast

Toasts can appear at any time to provide instant feedback on actions. They are usually temporary, but can also require the user to dismiss.

tooltip

Tooltip

Tooltips display a label that was omitted when hovering the element. They shouldn't be essential for users to complete tasks.

Layouts

Primitives