---
api_version: 2025-10
api_name: pos_ui_extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt
---

# Polaris web components

## Actions

[![Button](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/button-thumbnail.png)![Button](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/button-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/actions/button)

[Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/actions/button)

[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.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/actions/button)

[![Clickable](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/selectable-thumbnail.png)![Clickable](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/selectable-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/actions/clickable)

[Clickable](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/actions/clickable)

[Use Clickable to make any content interactive and accessible. Provides consistent click behavior.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/actions/clickable)

[![Tile](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/tile-thumbnail.png)![Tile](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/tile-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/actions/tile)

[Tile](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/actions/tile)

[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.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/actions/tile)

## Feedback

[![Banner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/banner-thumbnail.png)![Banner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/banner-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/feedback/banner)

[Banner](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/feedback/banner)

[Use `s-banner` to display important information or messages to merchants. Banners communicate critical updates, warnings, or success messages in a prominent way.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/feedback/banner)

## Forms

[![ChoiceList](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/radio-button-list-thumbnail.png)![ChoiceList](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/radio-button-list-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/choicelist)

[Choice​List](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/choicelist)

[Use `s-choice-list` to group related choices together, allowing single or multiple selections. Provides a structured way to present options to users.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/choicelist)

[![DateField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/date-field-thumbnail.png)![DateField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/date-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/datefield)

[Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/datefield)

[Use `s-date-field` to capture date input from users. Provides a consistent interface for date selection with proper validation.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/datefield)

[![DatePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/date-picker-thumbnail.png)![DatePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/date-picker-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/datepicker)

[Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/datepicker)

[Allow users to select a specific date.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/datepicker)

[![DateSpinner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/date-spinner-thumbnail.png)![DateSpinner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/date-spinner-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/datespinner)

[Date​Spinner](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/datespinner)

[Allow users to select a specific date.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/datespinner)

[![EmailField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/email-field-thumbnail.png)![EmailField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/email-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/emailfield)

[Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/emailfield)

[Use `s-email-field` to capture email addresses from users. Provides built-in email validation and appropriate keyboard layout.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/emailfield)

[![NumberField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/number-field-thumbnail.png)![NumberField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/number-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/numberfield)

[Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/numberfield)

[Use `s-number-field` to capture numeric input from users. Provides built-in number validation and appropriate keyboard layout for numeric entry.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/numberfield)

[![SearchField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/search-bar-thumbnail.png)![SearchField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/search-bar-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/searchfield)

[Search​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/searchfield)

[Let users enter search terms or find specific items using a single-line input field.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/searchfield)

[![TextArea](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/text-area-thumbnail.png)![TextArea](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/text-area-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/textarea)

[Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/textarea)

[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.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/textarea)

[![TextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/text-field-thumbnail.png)![TextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/text-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/textfield)

[Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/textfield)

[Use `s-text-field` to capture single-line text input from users. Provides a standard input field with validation and accessibility features.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/textfield)

[![TimeField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/time-field-thumbnail.png)![TimeField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/time-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/timefield)

[Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/timefield)

[Use `s-time-field` to capture time input from users. Provides a consistent interface for time selection with proper validation.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/timefield)

[![TimePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/time-picker-thumbnail.png)![TimePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/time-picker-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/timepicker)

[Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/timepicker)

[Allow users to select a specific time.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/forms/timepicker)

## Media

[![Icon](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/icon-thumbnail.png)![Icon](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/icon-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/media/icon)

[Icon](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/media/icon)

[Use `s-icon` to display visual symbols that communicate meaning and functionality. Icons provide quick recognition and enhance the user interface.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/media/icon)

[![Image](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/image-thumbnail.png)![Image](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/image-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/media/image)

[Image](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/media/image)

[Embeds an image within the interface and controls its presentation. Use to visually illustrate concepts, showcase products, or support user tasks and interactions.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/media/image)

## Structure

[![Box](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/box-thumbnail.png)![Box](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/box-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/box)

[Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/box)

[Use `s-box` to create flexible layout containers with consistent spacing and styling. Box provides a foundation for building structured layouts.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/box)

[![Modal](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/dialog-thumbnail.png)![Modal](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/dialog-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/modal)

[Modal](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/modal)

[Use `s-modal` to display content in an overlay. Modals are used to display important information that requires the merchant's attention.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/modal)

[![Page](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/screen-thumbnail.png)![Page](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/screen-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/page)

[Page](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/page)

[Use `s-page` as the main container for placing content in your app. Page comes with preset layouts and automatically adds spacing between elements.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/page)

[![PosBlock](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/pos-block-thumbnail.png)![PosBlock](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/pos-block-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/posblock)

[Pos​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/posblock)

[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.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/posblock)

[![ScrollBox](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/scroll-view-thumbnail.png)![ScrollBox](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/scroll-view-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/scrollbox)

[Scroll​Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/scrollbox)

[Use `s-scroll-box` to create scrollable areas for content that exceeds container bounds.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/scrollbox)

[![Section](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/section-thumbnail.png)![Section](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/section-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/section)

[Section](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/section)

[Groups related content into clearly-defined thematic areas. Sections have contextual heading levels to maintain a meaningful and accessible page structure.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/section)

[![Stack](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/stack-thumbnail.png)![Stack](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/stack-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/stack)

[Stack](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/stack)

[Organizes elements horizontally or vertically along the block or inline axis. Use to structure layouts, group related components, or control spacing between elements.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/structure/stack)

## Titles and text

[![Badge](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/badge-thumbnail.png)![Badge](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/badge-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/titles-and-text/badge)

[Badge](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/titles-and-text/badge)

[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.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/titles-and-text/badge)

[![Heading](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/heading-thumbnail.png)![Heading](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/heading-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/titles-and-text/heading)

[Heading](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/titles-and-text/heading)

[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.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/titles-and-text/heading)

[![Text](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/text-thumbnail.png)![Text](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10-rc/text-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/titles-and-text/text)

[Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/titles-and-text/text)

[Displays text with specific visual styles or tones. Use to emphasize or differentiate words or phrases within a Paragraph or other block-level components.](https://shopify.dev/docs/api/pos-ui-extensions/2025-10-rc/polaris-web-components.txt/titles-and-text/text)