Polaris web components

Triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use Button to let users perform specific tasks or initiate interactions throughout the interface. Buttons can also function as links, guiding users to internal or external destinations.

Displays multiple buttons in a layout.

A generic interactive container component that provides a flexible alternative for custom interactive elements not achievable with existing components like Button or Link. Use it to apply specific styling such as backgrounds, padding, or borders.

Interactive button used to categorize or highlight content attributes. They are often displayed near the content they classify, enhancing discoverability by allowing users to identify items with similar properties.

Makes text interactive, allowing users to navigate to other pages or perform specific actions. Supports standard URLs, custom protocols, and navigation within Shopify or app pages.

Use Menu to display a list of actions that can be performed on a resource.

Highlights important information or required actions prominently within the interface. Use to communicate statuses, provide feedback, or draw attention to critical updates.

Displays an animated indicator showing users that content or actions are loading. Use to communicate ongoing processes, such as fetching data from a server. For loading states on buttons, use the “loading” property on the Button component instead.

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.

Allow users to select a color from a color palette.

Allow users to select a color from a color palette.

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

Allow users to select a specific date or date range.

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. You must register a submit event to handle form submission in JavaScript.

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.

Let users enter search terms or find specific items using a single-line input field.

Allow users to pick one option from a menu. Ideal when presenting four or more choices to keep interfaces uncluttered.

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. Use to collect short, free-form information from users.

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

Show a user’s profile image or initials in a compact, visual element.

Renders a graphic symbol to visually communicate core parts of the product and available actions. Icons can act as wayfinding tools to help users quickly understand their location within the interface and common interaction patterns.

Embeds an image within the interface and controls its presentation. Use to visually illustrate concepts, showcase products, or support user tasks and interactions.

Display a small preview image representing content, products, or media.

Use s-admin-action to configure a primary and secondary action and title. Use of this component is required in order to use Admin action extensions.

s-admin-block provides a deeper integration with the container your UI is rendered into. This component should only be used in Block Extensions, which render inline on a resource page.

s-admin-print-action is a component used by admin print action extensions to denote a URL to print. Admin print action extensions require the use of this component.

Displays helpful information in a small overlay when users hover or focus on an element. Use to provide additional context without cluttering the interface.

A generic container that provides a flexible alternative for custom designs not achievable with existing components. Use it to apply styling such as backgrounds, padding, or borders, or to nest and group other components. The contents of Box always maintain their natural size, making it especially useful within layout components that would otherwise stretch their children.

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. Grid follows the same pattern as the CSS grid layout.

Displays a numbered list of related items in a specific sequence. Use to present step-by-step instructions, ranked items, or procedures where order matters.

Establishes a query container for responsive design. Use s-query-container to define an element as a containment context, enabling child components or styles to adapt based on the container’s size.

Groups related content into clearly-defined thematic areas. Sections have contextual styling that automatically adapts based on nesting depth. They also adjust heading levels to maintain a meaningful and accessible page structure.

Organizes elements horizontally or vertically along the block or inline axis. Use to structure layouts, group related components, or control spacing between elements.

Display data clearly in rows and columns, helping users view, analyze, and compare information. Automatically renders as a list on small screens and a table on large ones.

Displays a bulleted list of related items. Use to present collections of items or options where the sequence isn’t critical.

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. Used to categorize or highlight content attributes. They are often displayed near the content they classify, enhancing discoverability by allowing users to identify items with similar properties.

Renders hierarchical titles to communicate the structure and organization of page content. Heading levels adjust automatically based on nesting within parent Section components, ensuring a meaningful and accessible page outline.

Displays a block of text and can contain inline elements such as buttons, links, or emphasized text. Use to present standalone blocks of content as opposed to inline text.

Displays inline text with specific visual styles or tones. Use to emphasize or differentiate words or phrases within a Paragraph or other block-level components.