Web components

The button component triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages.

The clickable component wraps content to make it interactive and clickable.

The clickable chip component displays interactive labels or categories that users can click or remove.

Enables copying text to the user’s clipboard.

The link component 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.

The badge component displays status information or indicates completed actions through compact visual indicators.

The banner component highlights important information or required actions prominently within the interface.

Displays an indicator showing the completion status of a task.

The spinner component displays an animated indicator showing users that content or actions are loading.

The checkbox component provides a clear way for users to make selections, such as agreeing to terms, enabling settings, or choosing multiple items from a list.

The choice list component presents multiple options for single or multiple selections.

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.

The date field component captures date input with a consistent interface for date selection and proper validation.

The date picker component allows merchants to select dates using a calendar interface.

The drop zone component lets users upload files through drag-and-drop or by clicking to browse.

The email field component captures email address input.

The form component wraps form controls and enables implicit submission, allowing users to submit from any input by pressing Enter.

The money field component collects monetary values from users with built-in currency formatting and validation.

The number field component captures numeric input with built-in number validation.

The password field component securely collects sensitive information from users.

Use PhoneField to allow users to enter phone numbers.

The select component allows users to choose one option from a dropdown menu.

The switch component provides a clear way for users to toggle options or settings on and off.

The text area component captures multi-line text input.

The text field component captures single-line text input.

The URL field component collects URLs from users with built-in formatting and validation.

The box component provides a generic, flexible container for custom designs and layouts.

The divider component creates clear visual separation between elements in the interface.

The grid component organizes content in a matrix of rows and columns to create responsive page layouts.

The query container component establishes a container query context for responsive design.

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

The section component groups related content into clearly-defined thematic areas with consistent styling and structure.

The stack component organizes elements horizontally or vertically along the block or inline axis.

The icon component renders graphic symbols to visually communicate actions, status, and navigation throughout the interface.

The image component embeds images within the interface with control over presentation and loading behavior.

Use Map to display a map on a page.

Displays icons representing payment methods.

Use ProductThumbnail to display a product thumbnail

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

The modal component displays content in an overlay.

The popover component displays contextual content in an overlay triggered by a button using the commandFor attribute.

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

The tooltip component displays helpful information in a small overlay when users hover over or focus on an element.

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

The chip component displays static labels, categories, or attributes that help classify and organize content.

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

The heading component renders hierarchical titles to communicate the structure and organization of page content.

The ordered list component displays a numbered list of related items in a specific sequence.

The paragraph component displays blocks of text content and can contain inline elements like buttons, links, or emphasized text.

Displays a placeholder representation of text content while it loads.

The text component displays inline text with specific visual styles or tones.

Represents a specific point or duration in time.

The unordered list component displays a bulleted list of related items where sequence isn't critical.