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

# Polaris web components

## Actions

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

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

[Triggers actions or events, such as opening dialogs or navigating to other pages.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/button)

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

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

[A generic interactive container component that makes any content interactive and accessible via taps.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/clickable)

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

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

[Customizable buttons that allow merchants to complete actions quickly.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/tile)

## Feedback

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

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

[Highlights important information or required actions prominently within the interface.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/feedback/banner)

## Forms

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

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

[Presents multiple options for single or multiple selections.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/choicelist)

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

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

[Captures date input from merchants.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/datefield)

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

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

[Allows merchants to select a specific date, using a calendar-like picker interface.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/datepicker)

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

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

[Allows merchants to select a specific date, using a spinner interface.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/datespinner)

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

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

[Captures email address input from merchants.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/emailfield)

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

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

[Captures numeric input from merchants.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/numberfield)

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

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

[Captures search terms from merchants using a single-line input field.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/searchfield)

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

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

[Captures longer text content from merchants with a multi-line, resizable text input area.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/textarea)

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

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

[Captures single-line text input from merchants.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/textfield)

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

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

[Captures time input from merchants.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/timefield)

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

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

[Allows merchants to select a specific time.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/timepicker)

## Media

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

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

[Displays graphic symbols to communicate meaning and functionality.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/media/icon)

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

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

[Embeds an image within the interface and controls its presentation.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/media/image)

## Structure

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

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

[A generic container that provides flexible layout with consistent spacing and styling.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/structure/box)

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

[Divider](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/structure/divider)

[Creates a visual separation between content sections.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/structure/divider)

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

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

[Displays content in an overlay that requires merchant attention.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/structure/modal)

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

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

[Serves as the main container for app content with preset layouts and heading controls.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/structure/page)

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

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

[Creates 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/latest/polaris-web-components/structure/posblock)

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

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

[Creates a scrollable area for content that exceeds container bounds.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/structure/scrollbox)

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

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

[Groups related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/structure/section)

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

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

[Organizes elements horizontally or vertically along the block or inline axis.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/structure/stack)

## Titles and text

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

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

[Informs merchants about the status of an object or indicates that an action has been completed.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/titles-and-text/badge)

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

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

[Renders hierarchical titles to communicate the structure and organization of page content.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/titles-and-text/heading)

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

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

[Displays text with specific visual styles or tones.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/titles-and-text/text)