---
api_name: app-home
source_url:
  html: 'https://shopify.dev/docs/api/app-home/polaris-web-components'
  md: 'https://shopify.dev/docs/api/app-home/polaris-web-components.md'
---

# Polaris web components

## Actions

[![Button](https://shopify.dev/images/templated-apis-screenshots/admin/components/button.png)![Button](https://shopify.dev/images/templated-apis-screenshots/admin/components/button.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/button)

[Button](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/button)

[Triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages.](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/button)

[![ButtonGroup](https://shopify.dev/images/templated-apis-screenshots/admin/components/buttongroup.png)![ButtonGroup](https://shopify.dev/images/templated-apis-screenshots/admin/components/buttongroup.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/buttongroup)

[Button​Group](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/buttongroup)

[Displays multiple buttons in a layout.](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/buttongroup)

[![Clickable](https://shopify.dev/images/templated-apis-screenshots/admin/components/clickable.png)![Clickable](https://shopify.dev/images/templated-apis-screenshots/admin/components/clickable.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/clickable)

[Clickable](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/clickable)

[A generic interactive container component that provides a flexible alternative for custom interactive elements not achievable with existing components like Button or Link.](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/clickable)

[![ClickableChip](https://shopify.dev/images/templated-apis-screenshots/admin/components/clickable-chip.png)![ClickableChip](https://shopify.dev/images/templated-apis-screenshots/admin/components/clickable-chip.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/clickablechip)

[Clickable​Chip](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/clickablechip)

[Interactive button used to categorize or highlight content attributes.](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/clickablechip)

[![Link](https://shopify.dev/images/templated-apis-screenshots/admin/components/link.png)![Link](https://shopify.dev/images/templated-apis-screenshots/admin/components/link.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/link)

[Link](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/link)

[Makes text interactive, allowing users to navigate to other pages or perform specific actions.](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/link)

[![Menu](https://shopify.dev/images/templated-apis-screenshots/admin/components/menu.png)![Menu](https://shopify.dev/images/templated-apis-screenshots/admin/components/menu.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/menu)

[Menu](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/menu)

[Use Menu to display a list of actions that can be performed on a resource.](https://shopify.dev/docs/api/app-home/polaris-web-components/actions/menu)

## Feedback

[![Banner](https://shopify.dev/images/templated-apis-screenshots/admin/components/banner.png)![Banner](https://shopify.dev/images/templated-apis-screenshots/admin/components/banner.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/feedback/banner)

[Banner](https://shopify.dev/docs/api/app-home/polaris-web-components/feedback/banner)

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

[![Spinner](https://shopify.dev/images/templated-apis-screenshots/admin/components/spinner.png)![Spinner](https://shopify.dev/images/templated-apis-screenshots/admin/components/spinner.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/feedback/spinner)

[Spinner](https://shopify.dev/docs/api/app-home/polaris-web-components/feedback/spinner)

[Displays an animated indicator showing users that content or actions are loading.](https://shopify.dev/docs/api/app-home/polaris-web-components/feedback/spinner)

## Forms

[![Checkbox](https://shopify.dev/images/templated-apis-screenshots/admin/components/checkbox.png)![Checkbox](https://shopify.dev/images/templated-apis-screenshots/admin/components/checkbox.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/checkbox)

[Checkbox](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/checkbox)

[Give users a clear way to make selections, such as agreeing to terms or choosing multiple items from a list.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/checkbox)

[![ChoiceList](https://shopify.dev/images/templated-apis-screenshots/admin/components/choicelist.png)![ChoiceList](https://shopify.dev/images/templated-apis-screenshots/admin/components/choicelist.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/choicelist)

[Choice​List](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/choicelist)

[Present multiple options to users, allowing either single selections with radio buttons or multiple selections with checkboxes.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/choicelist)

[![ColorField](https://shopify.dev/images/templated-apis-screenshots/admin/components/color-field.png)![ColorField](https://shopify.dev/images/templated-apis-screenshots/admin/components/color-field.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/colorfield)

[Color​Field](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/colorfield)

[Allow users to select a color with a color picker or as a text input.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/colorfield)

[![ColorPicker](https://shopify.dev/images/templated-apis-screenshots/admin/components/color-picker.png)![ColorPicker](https://shopify.dev/images/templated-apis-screenshots/admin/components/color-picker.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/colorpicker)

[Color​Picker](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/colorpicker)

[Allow users to select a color from a color palette.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/colorpicker)

[![DateField](https://shopify.dev/images/templated-apis-screenshots/admin/components/datefield.png)![DateField](https://shopify.dev/images/templated-apis-screenshots/admin/components/datefield.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/datefield)

[Date​Field](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/datefield)

[Allow users to select a specific date with a date picker.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/datefield)

[![DatePicker](https://shopify.dev/images/templated-apis-screenshots/admin/components/datepicker.png)![DatePicker](https://shopify.dev/images/templated-apis-screenshots/admin/components/datepicker.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/datepicker)

[Date​Picker](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/datepicker)

[Allow users to select a specific date or date range.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/datepicker)

[![DropZone](https://shopify.dev/images/templated-apis-screenshots/admin/components/dropzone.png)![DropZone](https://shopify.dev/images/templated-apis-screenshots/admin/components/dropzone.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/dropzone)

[Drop​Zone](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/dropzone)

[Lets users upload files through drag-and-drop functionality into a designated area on a page, or by activating a button.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/dropzone)

[![EmailField](https://shopify.dev/images/templated-apis-screenshots/admin/components/emailfield.png)![EmailField](https://shopify.dev/images/templated-apis-screenshots/admin/components/emailfield.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/emailfield)

[Email​Field](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/emailfield)

[Let users enter email addresses with optimized keyboard settings.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/emailfield)

[![MoneyField](https://shopify.dev/images/templated-apis-screenshots/admin/components/moneyfield.png)![MoneyField](https://shopify.dev/images/templated-apis-screenshots/admin/components/moneyfield.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/moneyfield)

[Money​Field](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/moneyfield)

[Collect monetary values from users with built-in currency formatting and validation.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/moneyfield)

[![NumberField](https://shopify.dev/images/templated-apis-screenshots/admin/components/numberfield.png)![NumberField](https://shopify.dev/images/templated-apis-screenshots/admin/components/numberfield.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/numberfield)

[Number​Field](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/numberfield)

[Collect numerical values from users with optimized keyboard settings and built-in validation.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/numberfield)

[![PasswordField](https://shopify.dev/images/templated-apis-screenshots/admin/components/passwordfield.png)![PasswordField](https://shopify.dev/images/templated-apis-screenshots/admin/components/passwordfield.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/passwordfield)

[Password​Field](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/passwordfield)

[Securely collect sensitive information from users.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/passwordfield)

[![SearchField](https://shopify.dev/images/templated-apis-screenshots/admin/components/searchfield.png)![SearchField](https://shopify.dev/images/templated-apis-screenshots/admin/components/searchfield.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/searchfield)

[Search​Field](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/searchfield)

[Let users enter search terms or find specific items using a single-line input field.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/searchfield)

[![Select](https://shopify.dev/images/templated-apis-screenshots/admin/components/select.png)![Select](https://shopify.dev/images/templated-apis-screenshots/admin/components/select.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/select)

[Select](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/select)

[Allow users to pick one option from a menu.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/select)

[![Switch](https://shopify.dev/images/templated-apis-screenshots/admin/components/switch.png)![Switch](https://shopify.dev/images/templated-apis-screenshots/admin/components/switch.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/switch)

[Switch](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/switch)

[Give users a clear way to toggle options on or off.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/switch)

[![TextArea](https://shopify.dev/images/templated-apis-screenshots/admin/components/textarea.png)![TextArea](https://shopify.dev/images/templated-apis-screenshots/admin/components/textarea.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/textarea)

[Text​Area](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/textarea)

[Collect longer text content from users with a multi-line input that expands automatically.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/textarea)

[![TextField](https://shopify.dev/images/templated-apis-screenshots/admin/components/textfield.png)![TextField](https://shopify.dev/images/templated-apis-screenshots/admin/components/textfield.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/textfield)

[Text​Field](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/textfield)

[Lets users enter or edit text within a single-line input.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/textfield)

[![URLField](https://shopify.dev/images/templated-apis-screenshots/admin/components/urlfield.png)![URLField](https://shopify.dev/images/templated-apis-screenshots/admin/components/urlfield.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/urlfield)

[URL​Field](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/urlfield)

[Collect URLs from users with built-in formatting and validation.](https://shopify.dev/docs/api/app-home/polaris-web-components/forms/urlfield)

## Media

[![Avatar](https://shopify.dev/images/templated-apis-screenshots/admin/components/avatar.png)![Avatar](https://shopify.dev/images/templated-apis-screenshots/admin/components/avatar.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/media/avatar)

[Avatar](https://shopify.dev/docs/api/app-home/polaris-web-components/media/avatar)

[Show a user’s profile image or initials in a compact, visual element.](https://shopify.dev/docs/api/app-home/polaris-web-components/media/avatar)

[![Icon](https://shopify.dev/images/templated-apis-screenshots/admin/components/icon.png)![Icon](https://shopify.dev/images/templated-apis-screenshots/admin/components/icon.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/media/icon)

[Icon](https://shopify.dev/docs/api/app-home/polaris-web-components/media/icon)

[Renders a graphic symbol to visually communicate core parts of the product and available actions.](https://shopify.dev/docs/api/app-home/polaris-web-components/media/icon)

[![Image](https://shopify.dev/images/templated-apis-screenshots/admin/components/image.png)![Image](https://shopify.dev/images/templated-apis-screenshots/admin/components/image.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/media/image)

[Image](https://shopify.dev/docs/api/app-home/polaris-web-components/media/image)

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

[![Thumbnail](https://shopify.dev/images/templated-apis-screenshots/admin/components/thumbnail.png)![Thumbnail](https://shopify.dev/images/templated-apis-screenshots/admin/components/thumbnail.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/media/thumbnail)

[Thumbnail](https://shopify.dev/docs/api/app-home/polaris-web-components/media/thumbnail)

[Display a small preview image representing content, products, or media.](https://shopify.dev/docs/api/app-home/polaris-web-components/media/thumbnail)

## Overlays

[![Modal](https://shopify.dev/images/templated-apis-screenshots/admin/components/modal.png)![Modal](https://shopify.dev/images/templated-apis-screenshots/admin/components/modal.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/modal)

[Modal](https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/modal)

[Displays content in an overlay.](https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/modal)

[![Popover](https://shopify.dev/images/templated-apis-screenshots/admin/components/popover.png)![Popover](https://shopify.dev/images/templated-apis-screenshots/admin/components/popover.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/popover)

[Popover](https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/popover)

[Popovers are used to display content in an overlay that can be triggered by a button.](https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/popover)

[![Tooltip](https://shopify.dev/images/templated-apis-screenshots/admin/components/tooltip.png)![Tooltip](https://shopify.dev/images/templated-apis-screenshots/admin/components/tooltip.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/tooltip)

[Tooltip](https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/tooltip)

[Displays helpful information in a small overlay when users hover or focus on an element.](https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/tooltip)

## Structure

[![Box](https://shopify.dev/images/templated-apis-screenshots/admin/components/box.png)![Box](https://shopify.dev/images/templated-apis-screenshots/admin/components/box.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/box)

[Box](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/box)

[A generic container that provides a flexible alternative for custom designs not achievable with existing components.](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/box)

[![Divider](https://shopify.dev/images/templated-apis-screenshots/admin/components/divider.png)![Divider](https://shopify.dev/images/templated-apis-screenshots/admin/components/divider.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/divider)

[Divider](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/divider)

[Create clear visual separation between elements in your user interface.](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/divider)

[![Grid](https://shopify.dev/images/templated-apis-screenshots/admin/components/grid.png)![Grid](https://shopify.dev/images/templated-apis-screenshots/admin/components/grid.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/grid)

[Grid](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/grid)

[Use `s-grid` to organize your content in a matrix of rows and columns and make responsive layouts for pages.](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/grid)

[![OrderedList](https://shopify.dev/images/templated-apis-screenshots/admin/components/ordered-list.png)![OrderedList](https://shopify.dev/images/templated-apis-screenshots/admin/components/ordered-list.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/orderedlist)

[Ordered​List](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/orderedlist)

[Displays a numbered list of related items in a specific sequence.](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/orderedlist)

[![Page](https://shopify.dev/images/templated-apis-screenshots/admin/components/page.png)![Page](https://shopify.dev/images/templated-apis-screenshots/admin/components/page.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/page)

[Page](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/page)

[Use `s-page` as the main container for placing content in your app.](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/page)

[![QueryContainer](https://shopify.dev/images/templated-apis-screenshots/admin/components/querycontainer.png)![QueryContainer](https://shopify.dev/images/templated-apis-screenshots/admin/components/querycontainer.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/querycontainer)

[Query​Container](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/querycontainer)

[Establishes a query container for responsive design.](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/querycontainer)

[![Section](https://shopify.dev/images/templated-apis-screenshots/admin/components/section.png)![Section](https://shopify.dev/images/templated-apis-screenshots/admin/components/section.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/section)

[Section](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/section)

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

[![Stack](https://shopify.dev/images/templated-apis-screenshots/admin/components/stack.png)![Stack](https://shopify.dev/images/templated-apis-screenshots/admin/components/stack.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/stack)

[Stack](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/stack)

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

[![Table](https://shopify.dev/images/templated-apis-screenshots/admin/components/table.png)![Table](https://shopify.dev/images/templated-apis-screenshots/admin/components/table.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/table)

[Table](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/table)

[Display data clearly in rows and columns, helping users view, analyze, and compare information.](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/table)

[![UnorderedList](https://shopify.dev/images/templated-apis-screenshots/admin/components/unordered-list.png)![UnorderedList](https://shopify.dev/images/templated-apis-screenshots/admin/components/unordered-list.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/unorderedlist)

[Unordered​List](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/unorderedlist)

[Displays a bulleted list of related items.](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/unorderedlist)

## Titles and text

[![Badge](https://shopify.dev/images/templated-apis-screenshots/admin/components/badge.png)![Badge](https://shopify.dev/images/templated-apis-screenshots/admin/components/badge.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/badge)

[Badge](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/badge)

[Inform users about the status of an object or indicate that an action has been completed.](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/badge)

[![Chip](https://shopify.dev/images/templated-apis-screenshots/admin/components/chip.png)![Chip](https://shopify.dev/images/templated-apis-screenshots/admin/components/chip.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/chip)

[Chip](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/chip)

[Represents a set of user-supplied keywords that help label, organize, and categorize objects.](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/chip)

[![Heading](https://shopify.dev/images/templated-apis-screenshots/admin/components/heading.png)![Heading](https://shopify.dev/images/templated-apis-screenshots/admin/components/heading.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/heading)

[Heading](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/heading)

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

[![Paragraph](https://shopify.dev/images/templated-apis-screenshots/admin/components/paragraph.png)![Paragraph](https://shopify.dev/images/templated-apis-screenshots/admin/components/paragraph.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/paragraph)

[Paragraph](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/paragraph)

[Displays a block of text and can contain inline elements such as buttons, links, or emphasized text.](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/paragraph)

[![Text](https://shopify.dev/images/templated-apis-screenshots/admin/components/text.png)![Text](https://shopify.dev/images/templated-apis-screenshots/admin/components/text.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/text)

[Text](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/text)

[Displays inline text with specific visual styles or tones.](https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/text)