UI components

Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.

Enables clipboard functionality when its id is referenced by the activateTarget property of a Button, Pressable, or Link component.

A modal to complete an order action flow.

Link makes text interactive so customers can perform an action, such as navigating to another location.

Use a menu to display a list of actions in a popover.

Pressable is a generic interactive component.

Use to represent a specific object within a collection, that a customer can take action on.

Use badges to highlight contextual information, like a label or a status, about an object.

Use banners to communicate important messages to customers in a prominent way.

Use to visually represent the completion of a task or process.

Spinner is used to notify buyers that their action is being processed.

Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions.

Options inside a ChoiceList.

Use choice lists to present a list of choices where buyers can make a single selection or multiple selections.

Use buyer consent checkboxes for collecting the buyer's approval for a given policy.

Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout.

Use a date field to get a date input from a customer.

The DatePicker component is a calendar picker UI that allows users to select a single date or a date range

DropZone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button.

The form component should be used to wrap one or more form controls.

A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting.

Selects let buyers choose one option from an options menu.

Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2.

Use a switch to represent an on or off state that takes effect immediately when tapped.

Use a text field to get text input from a customer.

Options inside a ToggleButtonGroup.

ToggleButtonGroup allows you to make a single choice out of the number of options provided.

BlockLayout is used to lay out content over multiple rows.

BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements.

BlockStack is used to vertically stack elements.

Group related content and functionality together in a familiar and consistent style, for customers to scan, read, and get things done.

A divider separates content and represents a thematic break between elements.

Grid is used to lay out content in a matrix of rows and columns.

GridItem can be used as children of Grid.

InlineLayout is used to lay out content over multiple columns.

InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements.

InlineStack is used to lay out a horizontal row of elements.

The outer wrapper of the page—including the page title, subtitle, and page-level actions—displayed in a familiar and consistent style that sets expectations about the purpose of the page.

ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view.

This is a helper for authoring conditional values for property styles.

View is a generic container component.

Avatar component is used to show a thumbnail representation of an individual or business in the interface.

Icons are pictograms or graphic symbols.

Image is used for large format, responsive images.

Display up to 4 images in a grid or stacked layout.

Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations.

MapMarker represents a specific location or point of interest on a map.

MapPopover provides additional information or context about a specific location or point of interest on a map.

Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods.

Product thumbnail is a representation of a product image.

Used to quickly access scannable data.

SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page.

Use the Chat component to create real-time chat applications.

Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed.

Popovers are similar to tooltips.

The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements.

Tooltips are floating labels that briefly explain the function of a user interface element.

Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator.

Headings control the visual style of headings.

Heading group controls the heading level of headings nested within it, like H1, H2, H3.

Lists display a set of related content.

List items are used as children of the List component.

SkeletonText is used to provide a low fidelity representation of text content before it appears on the page.

SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page.

A Tag is used to help label, organize or categorize objects.

Text is used to visually style and provide semantic value for a small piece of text content.

Text block is used to render a block of text that occupies the full width available, like a paragraph.