Polaris web components

Triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages.

A generic interactive container component that provides a flexible alternative for custom interactive elements not achievable with existing components like Button or Link.

Interactive button used to categorize or highlight content attributes.

Makes text interactive, allowing users to navigate to other pages or perform specific actions.

Allows users to toggle between active/inactive states.

The Announcement component provides a less disruptive alternative to auto-open modals for capturing user attention.

Highlights important information or required actions prominently within the interface.

Displays an indicator showing the completion status of a task.

Displays a placeholder representation of text content while it loads.

Displays an animated indicator showing users that content or actions are loading.

Give users a clear way to make selections, such as agreeing to terms or choosing multiple items from a list.

Present multiple options to users, allowing either single selections with radio buttons or multiple selections with checkboxes.

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.

Allow users to select a specific date with a date picker.

Allow users to select a specific date or date range.

Lets users upload files through drag-and-drop functionality into a designated area on a page, or by activating a button.

Let users enter email addresses with optimized keyboard settings.

Wraps one or more form controls and enables implicit submission, letting users submit the form from any input by pressing “Enter.” Unlike the HTML form element, this component doesn’t automatically submit data via HTTP.

Collect monetary values from users with built-in currency formatting and validation.

Collect numerical values from users with optimized keyboard settings and built-in validation.

Securely collect sensitive information from users.

Use PhoneField to allow users to enter phone numbers.

Allow users to pick one option from a menu.

Give users a clear way to toggle options on or off.

Collect longer text content from users with a multi-line input that expands automatically.

Lets users enter or edit text within a single-line input.

Collect URLs from users with built-in formatting and validation.

Creates a collapsible content area that can be expanded or collapsed by users.

Use Map to display a map on a page.

Renders a graphic symbol to visually communicate core parts of the product and available actions.

Embeds an image within the interface and controls its presentation.

Displays icons representing payment methods.

Use ProductThumbnail to display a product thumbnail

Displays a scannable QR code representing data such as URLs or text.

Displays content in an overlay.

Popovers are used to display content in an overlay that can be triggered by a button.

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

Displays helpful information in a small overlay when users hover or focus on an element.

A generic container that provides a flexible alternative for custom designs not achievable with existing components.

Create clear visual separation between elements in your user interface.

Use s-grid to organize your content in a matrix of rows and columns and make responsive layouts for pages.

Displays a numbered list of related items in a specific sequence.

Establishes a query container for responsive design.

Provides a scrollable container for long content that exceeds the available space.

Groups related content into clearly-defined thematic areas.

Organizes elements horizontally or vertically along the block or inline axis.

Displays a bulleted list of related items.

Displays abbreviated text or acronyms, revealing their full meaning or additional context through a tooltip on hover or focus.

Inform users about the status of an object or indicate that an action has been completed.

Represents a set of user-supplied keywords that help label, organize, and categorize objects.

Renders hierarchical titles to communicate the structure and organization of page content.

Displays a block of text and can contain inline elements such as buttons, links, or emphasized text.

Displays inline text with specific visual styles or tones.

Represents a specific point or duration in time.

Enables copying text to the user’s clipboard.