---
title: Polaris web components
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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/button-CdGXJjN3.png)![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/button-CdGXJjN3.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/buttongroup-cu3ttjUi.png)![ButtonGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/buttongroup-cu3ttjUi.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/clickable-Bed6GEzq.png)![Clickable](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/clickable-Bed6GEzq.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/clickable-chip-DZ4SAGYc.png)![ClickableChip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/clickable-chip-DZ4SAGYc.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/link-BHZwxvD8.png)![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/link-BHZwxvD8.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/menu-70pxKMNc.png)![Menu](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/menu-70pxKMNc.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 and status indicators

[![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/badge-SrJGEQW5.png)![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/badge-SrJGEQW5.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/feedback-and-status-indicators/badge)

[Badge](https://shopify.dev/docs/api/app-home/polaris-web-components/feedback-and-status-indicators/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/feedback-and-status-indicators/badge)

[![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/banner-CSc2_A0f.png)![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/banner-CSc2_A0f.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/feedback-and-status-indicators/banner)

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

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

[![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/spinner-Bw4zIb82.png)![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/spinner-Bw4zIb82.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/feedback-and-status-indicators/spinner)

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

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

## Forms

[![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/checkbox-DFmfCiT4.png)![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/checkbox-DFmfCiT4.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/choicelist-B2TfAN9x.png)![ChoiceList](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/choicelist-B2TfAN9x.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/color-field-7dgfIQZ-.png)![ColorField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/color-field-7dgfIQZ-.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/color-picker-Bqlxgb4e.png)![ColorPicker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/color-picker-Bqlxgb4e.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/datefield-PzzMeGH0.png)![DateField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/datefield-PzzMeGH0.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/datepicker-DUgxVSZB.png)![DatePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/datepicker-DUgxVSZB.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/dropzone-AQpi4uGt.png)![DropZone](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/dropzone-AQpi4uGt.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/emailfield-vytm1uVt.png)![EmailField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/emailfield-vytm1uVt.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/moneyfield-DbKmvaH-.png)![MoneyField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/moneyfield-DbKmvaH-.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/numberfield-DD00ugG1.png)![NumberField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/numberfield-DD00ugG1.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/passwordfield-BE-5DANJ.png)![PasswordField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/passwordfield-BE-5DANJ.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/searchfield-FQ17iQis.png)![SearchField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/searchfield-FQ17iQis.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/select-CQdXi2Yt.png)![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/select-CQdXi2Yt.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/switch-DE4Jf452.png)![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/switch-DE4Jf452.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/textarea-DSTYqCxX.png)![TextArea](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/textarea-DSTYqCxX.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/textfield-D5zp62-y.png)![TextField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/textfield-D5zp62-y.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/urlfield-RWo1-vx2.png)![URLField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/urlfield-RWo1-vx2.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)

## Layout and structure

[![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/box-CO_V79Xi.png)![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/box-CO_V79Xi.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-structure/box)

[Box](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-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/layout-and-structure/box)

[![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/divider-CvqN_5Pv.png)![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/divider-CvqN_5Pv.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-structure/divider)

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

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

[![Grid](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/grid-BsFCiU5f.png)![Grid](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/grid-BsFCiU5f.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-structure/grid)

[Grid](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-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/layout-and-structure/grid)

[![OrderedList](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/ordered-list-DkWPfrjo.png)![OrderedList](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/ordered-list-DkWPfrjo.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-structure/orderedlist)

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

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

[![QueryContainer](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/querycontainer-MHu2kB_y.png)![QueryContainer](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/querycontainer-MHu2kB_y.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-structure/querycontainer)

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

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

[![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/section-C8sCHOz2.png)![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/section-C8sCHOz2.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-structure/section)

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

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

[![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/stack-B6pqB8LL.png)![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/stack-B6pqB8LL.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-structure/stack)

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

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

[![Table](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/table-yQvi0Pxe.png)![Table](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/table-yQvi0Pxe.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-structure/table)

[Table](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-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/layout-and-structure/table)

[![UnorderedList](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/unordered-list-HLaM9fir.png)![UnorderedList](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/unordered-list-HLaM9fir.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/layout-and-structure/unorderedlist)

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

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

## Media and visuals

[![Avatar](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/avatar-BVCHBUf6.png)![Avatar](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/avatar-BVCHBUf6.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/media-and-visuals/avatar)

[Avatar](https://shopify.dev/docs/api/app-home/polaris-web-components/media-and-visuals/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-and-visuals/avatar)

[![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/icon-a6puDp7d.png)![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/icon-a6puDp7d.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/media-and-visuals/icon)

[Icon](https://shopify.dev/docs/api/app-home/polaris-web-components/media-and-visuals/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-and-visuals/icon)

[![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/image-BLpC50N2.png)![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/image-BLpC50N2.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/media-and-visuals/image)

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

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

[![Thumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/thumbnail-DE81GcQz.png)![Thumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/thumbnail-DE81GcQz.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/media-and-visuals/thumbnail)

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

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

## Overlays

[![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/modal-aqMwo-O7.png)![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/modal-aqMwo-O7.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://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/popover-Dkr0w69r.png)![Popover](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/popover-Dkr0w69r.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)

## Structure

[![Page](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/page-ZjQ0PRv6.png)![Page](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/page-ZjQ0PRv6.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)

## Typography and content

[![Chip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/chip-BfsVHJqK.png)![Chip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/chip-BfsVHJqK.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/typography-and-content/chip)

[Chip](https://shopify.dev/docs/api/app-home/polaris-web-components/typography-and-content/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/typography-and-content/chip)

[![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/heading-D2zFK9OA.png)![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/heading-D2zFK9OA.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/typography-and-content/heading)

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

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

[![Paragraph](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/paragraph-BpokbBlU.png)![Paragraph](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/paragraph-BpokbBlU.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/typography-and-content/paragraph)

[Paragraph](https://shopify.dev/docs/api/app-home/polaris-web-components/typography-and-content/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/typography-and-content/paragraph)

[![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/text-Dd2oqkHC.png)![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/text-Dd2oqkHC.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/typography-and-content/text)

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

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

[![Tooltip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/tooltip-BXzVy986.png)![Tooltip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/tooltip-BXzVy986.png)](https://shopify.dev/docs/api/app-home/polaris-web-components/typography-and-content/tooltip)

[Tooltip](https://shopify.dev/docs/api/app-home/polaris-web-components/typography-and-content/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/typography-and-content/tooltip)