Polaris web components
Polaris web components are the UI building blocks that you use to display data and trigger API functions. These components are native UI elements that follow Shopify's design system and render optimized interfaces for retail workflows in the POS app on iOS and Android devices (POS version 10.19 and later).
Your target determines which components you can use because different locations in POS have different interface requirements and constraints.
Anchor to ActionsActions
Actions trigger retail operations through quick, touch-based interactions like applying discounts, confirming payments, and initiating workflows.
Button
Execute actions through tappable button elements with customizable titles and styles.
Clickable
Make any content tappable and trigger actions when pressed.
Tile
Display interactive buttons for the POS smart grid that allow merchants to complete actions quickly.
Link
The Link component makes text interactive, allowing users to trigger actions through tappable text.
Anchor to Feedback and status indicatorsFeedback and status indicators
Feedback and status indicators keep staff informed about transaction status, errors, and confirmations during retail operations.
Badge
Use color and text to communicate the state of orders, products, customers, and other business data.
Banner
Highlight important information or required actions prominently within the POS interface.
Modal
Display content in an overlay that requires merchant attention before proceeding.
Spinner
The Spinner component indicates ongoing processes or loading states.
Anchor to FormsForms
Forms capture data during transactions with built-in validation and formatting optimized for mobile touch interfaces.
Choice
Present multiple options for single or multiple selections.
Date
Capture date input with a consistent interface for date selection and proper validation.
Date
Allow merchants to select a specific date using a calendar-like picker interface.
Date
Enable merchants to select a specific date using a spinner interface with scrollable columns for month, day, and year.
Email
Capture email address input from customers with built-in validation.
Number
Capture numeric input with built-in validation.
Search
Capture search terms using a single-line input field.
Text
Capture longer text content with a multi-line, resizable text input area.
Text
Capture single-line text input.
Time
Capture time input with a consistent interface for time selection and validation.
Time
Allow merchants to select a specific time using an interactive picker interface.
Switch
The Switch component creates a toggle control that allows merchants to turn an option on or off.
Anchor to Layout and structureLayout and structure
Layout and structure components create consistent visual hierarchy and spacing, presenting content clearly across different device sizes.
Box
Display a generic container with consistent spacing and styling.
Divider
Create visual separation between content sections.
Heading
Render hierarchical titles to communicate the structure and organization of page content.
Page
Define full-screen views within modals with navigation titles and back button support.
Pos
Create a container to place content with an action button.
Scroll
Create a scrollable area for content that exceeds container bounds.
Section
Group related content into clearly-defined thematic areas.
Stack
Organize elements horizontally or vertically along the block or inline axis.
Text
Display text with specific visual styles or tones.
Empty
The component displays a placeholder view when there is no content to show.
Tabs
The Tabs component organizes content into separate views, allowing merchants to switch between related information without leaving the current page.
Anchor to Media and visualsMedia and visuals
Media and visuals display product images, icons, and branding elements that help staff identify products and communicate information.
Icon
Display standardized visual symbols from the POS catalog to represent actions, statuses, or categories consistently.
Image
Add visual content to the POS interface and customize the presentation of visuals.
Embed
The Embed component displays a preview of printable content from a specified source URL.