Polaris web components

Triggers actions or events, such as opening dialogs or navigating to other pages. Use Button to let users perform specific tasks or initiate interactions throughout the interface.

Use Clickable to make any content interactive and accessible. Provides consistent click behavior.

Tiles are customizable buttons that allow staff to complete actions quickly. Think of them as shortcuts--adding a 10% discount to an order, for example. Tiles provide contextual information and let merchants quickly access workflows, actions, and information from the smart grid and the top of detail pages. They're dynamic and can change based on surrounding context, such as what's in the cart.

Use s-banner to display important information or messages to merchants. Banners communicate critical updates, warnings, or success messages in a prominent way.

Use s-choice-list to group related choices together, allowing single or multiple selections. Provides a structured way to present options to users.

Use s-date-field to capture date input from users. Provides a consistent interface for date selection with proper validation.

Allow users to select a specific date.

Allow users to select a specific date.

Use s-email-field to capture email addresses from users. Provides built-in email validation and appropriate keyboard layout.

Use s-number-field to capture numeric input from users. Provides built-in number validation and appropriate keyboard layout for numeric entry.

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

Use s-text-area to capture multi-line text input from users. Provides a resizable text input area for longer content like descriptions or comments.

Use s-text-field to capture single-line text input from users. Provides a standard input field with validation and accessibility features.

Use s-time-field to capture time input from users. Provides a consistent interface for time selection with proper validation.

Allow users to select a specific time.

Use s-icon to display visual symbols that communicate meaning and functionality. Icons provide quick recognition and enhance the user interface.

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

Use s-box to create flexible layout containers with consistent spacing and styling. Box provides a foundation for building structured layouts.

Use s-modal to display content in an overlay. Modals are used to display important information that requires the merchant's attention.

Use s-page as the main container for placing content in your app. Page comes with preset layouts and automatically adds spacing between elements.

Use s-pos-block to create a surface on the specified block extension target, serving as a container to place content with an action button.

Use s-scroll-box to create scrollable areas for content that exceeds container bounds.

Groups related content into clearly-defined thematic areas. Sections have contextual 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.

Use s-badge to inform merchants of the status of an item or action that's been taken. Badges display text with visual styling to communicate status information.

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 text with specific visual styles or tones. Use to emphasize or differentiate words or phrases within a Paragraph or other block-level components.