Components

The ActionItem provides a tappable surface on the specified extension target as an entry point to an extension.

Badges are used to inform merchants of the status of an item or action that’s been taken.

A banner informs merchants about important changes or persistent conditions.

Buttons enable the merchant to initiate actions, like "add", "save", or "next".

The camera scanner uses the devices camera to scan and decode barcodes or QR codes.

A component that enables users to open a dialog and select a date through a text input.

A component used to select a date through a dialog.

A dialog is a high-priority, intentionally disruptive message that requires action from the merchant before they can continue using POS.

Use an email field to conveniently and accurately capture merchant email addresses.

Use a formatted text field when you require additional functionality such as the text field input type or a custom validator.

A component that renders an icon from the POS asset catalog.

The image component displays an image to a merchant in Shopify POS.

The list is a scrollable component in which the list rows are rendered.

A component used to navigate between different screens.

Use a number field to conveniently and accurately capture numerical values.

A component used to authenticate or identify individuals through a standarized number pad.

A radio button list lets merchants select from a given set of options.

A component used in the root of a modal extension to define a screen.

The ScrollView component allows content that doesn’t fully fit on screen to scroll.

The search bar lets merchants enter search queries for objects throughout the app.

A component used to group other components together in a card-like UI.

The segmented control lets the merchant easily switch between different lists or views on the same page.

The selectable component allows you to wrap any non-interactive UI component to make it selectable.

Set of spacing constants to be used in the UI Extensions components library.

A container for other components that allows them to be stacked horizontally or vertically.

A component used for increasing or decreasing quantities.

Text can be rendered in different sizes and colors in order to structure content.

Use a text input to allow merchants to input or modify multiline text.

Use a text field to allow merchants to enter or edit text.

Tiles are customizable buttons that allow staff to complete actions quickly.

A component that enables users to open a dialog and select a time through a text input.

A component used to select a time through a dialog.