---
title: Polaris web components
description: >-
  Polaris web components for building consistent and accessible user interfaces
  in POS UI extensions.
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)

[The `Button` component 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)

[The `Clickable` component makes any content interactive.](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)

[The `Tile` component displays interactive buttons for the POS smart grid.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/tile)

## Feedback and status indicators

[![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/feedback-and-status-indicators/badge)

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

[The `Badge` component uses color and text to communicate status information for orders, products, customers, and other business data.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/badge)

[![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-and-status-indicators/banner)

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

[The `Banner` component highlights important information or required actions.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/banner)

[![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/feedback-and-status-indicators/modal)

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

[The `Modal` component displays content in an overlay that requires merchant attention.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/modal)

## 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)

[The `ChoiceList` component 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)

[The `DateField` component captures date input with a consistent interface for date selection and 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)

[The `DatePicker` component allows merchants to select dates using a calendar 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)

[The `DateSpinner` component enables merchants to select dates using a spinner interface with scrollable columns for month, day, and year.](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)

[The `EmailField` component captures email address input.](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)

[The `NumberField` component captures numeric input with built-in number validation.](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)

[The `SearchField` component captures search terms for filtering and search functionality.](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)

[The `TextArea` component captures multi-line text input.](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)

[The `TextField` component captures single-line text input.](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)

[The `TimeField` component captures time input through direct text entry.](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)

[The `TimePicker` component allows merchants to select times using an interactive picker interface.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/timepicker)

## Layout and 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/layout-and-structure/box)

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

[The `Box` component provides a container for layout and visual styling.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-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/layout-and-structure/divider)

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

[The `Divider` component creates visual separation between content sections by rendering a horizontal or vertical line.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/divider)

[![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/layout-and-structure/heading)

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

[The `Heading` component renders hierarchical titles to communicate the structure and organization of page content and help users navigate complex interfaces.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/heading)

[![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/layout-and-structure/page)

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

[The `Page` component 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/layout-and-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/layout-and-structure/posblock)

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

[The `PosBlock` component creates a container to place content with an action button.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-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/layout-and-structure/scrollbox)

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

[The `ScrollBox` component creates a scrollable area for content that exceeds container bounds.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-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/layout-and-structure/section)

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

[The `Section` component groups related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-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/layout-and-structure/stack)

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

[The `Stack` component organizes elements along the block (vertical) or inline (horizontal) axis.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/stack)

[![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/layout-and-structure/text)

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

[The `Text` component displays text with specific visual styles or tones.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/text)

## Media and visuals

[![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-and-visuals/icon)

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

[The `Icon` component displays standardized visual symbols from the POS catalog to represent actions, statuses, or categories.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/media-and-visuals/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-and-visuals/image)

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

[The `Image` component displays visual content.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/media-and-visuals/image)

***