---
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. Use Button to let merchants perform specific tasks or initiate interactions throughout the interface.](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. Tiles provide contextual information and let merchants 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/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. Use to communicate critical updates, warnings, information or success messages in a prominent way.](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. Use when merchants need to choose from a defined set of options in forms or filtering interfaces.](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. Provides a consistent interface for date selection, with proper validation.](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. Provides built-in email validation and appropriate keyboard layout.](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. Provides built-in number validation and appropriate keyboard layout for numeric entry.](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. Includes visual styling to indicate search functionality, and an accessory to quickly clear the input.](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. Use to collect short, free-form information.](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. Provides a consistent interface for time selection, with proper validation.](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. Use to enhance navigation, indicate actions, or provide visual context alongside text.](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. Use to visually illustrate concepts, showcase products, or support user tasks and interactions.](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. Use it to apply padding, to nest and group other components, or as the foundation for building structured layouts.](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. Dividers help organize information and improve content hierarchy by providing clear section boundaries.](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. Use to present critical information, confirmations, or focused tasks without losing page context.](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. Use to structure full-screen views with consistent navigation and content organization.](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. Sections have contextual heading levels to maintain a meaningful and accessible page structure.](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. Use to structure layouts, group related components, or control spacing between elements.](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. Badges display text with visual styling to communicate status information.](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. 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/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. Use to present content with appropriate emphasis, hierarchy, or tone.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/titles-and-text/text)