---
api_version: 2024-10
api_name: admin-extensions
source_url:
  html: 'https://shopify.dev/docs/api/admin-extensions/2024-10/components'
  md: 'https://shopify.dev/docs/api/admin-extensions/2024-10/components.md'
---

# Components

## Actions

[![Button](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/button-thumbnail.png)![Button](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/button-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/button)

[Button](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/button)

[Use this component when you want to provide users the ability to perform specific actions, like saving data.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/button)

[![Link](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/link-thumbnail.png)![Link](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/link-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/link)

[Link](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/link)

[This is an interactive component that directs users to a specified URL.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/link)

[![Pressable](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/pressable-thumbnail.png)![Pressable](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/pressable-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/pressable)

[Pressable](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/pressable)

[Use this component when you need to capture click or press events on its child elements without adding any additional visual styling.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/pressable)

## Forms

[![Checkbox](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/checkbox-thumbnail.png)![Checkbox](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/checkbox-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/checkbox)

[Checkbox](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/checkbox)

[Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/checkbox)

[![ChoiceList](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/choicelist-thumbnail.png)![ChoiceList](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/choicelist-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/choicelist)

[Choice​List](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/choicelist)

[Use this component if you need to group together a related list of interactive choices as radio buttons or checkboxes.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/choicelist)

[![ColorPicker](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/colorpicker-thumbnail.png)![ColorPicker](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/colorpicker-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/colorpicker)

[Color​Picker](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/colorpicker)

[Use this component if you need to select a color.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/colorpicker)

[![DateField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/datefield-thumbnail.png)![DateField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/datefield-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/datefield)

[Date​Field](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/datefield)

[This is a form field that lets users select a date using the DatePicker component.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/datefield)

[![DatePicker](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/datepicker-thumbnail.png)![DatePicker](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/datepicker-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/datepicker)

[Date​Picker](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/datepicker)

[Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/datepicker)

[![EmailField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/emailfield-thumbnail.png)![EmailField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/emailfield-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/emailfield)

[Email​Field](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/emailfield)

[Use this when you need users to provide their email addresses.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/emailfield)

[![Form](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/form-thumbnail.png)![Form](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/form-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/form)

[Form](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/form)

[Use this component when you want to collect input from users.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/form)

[![FunctionSettings](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/form-thumbnail.png)![FunctionSettings](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/form-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/functionsettings)

[Function​Settings](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/functionsettings)

[FunctionSettings should be used when configuring the metafield configuration of a Shopify Function.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/functionsettings)

[![MoneyField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/moneyfield-thumbnail.png)![MoneyField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/moneyfield-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/moneyfield)

[Money​Field](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/moneyfield)

[This is the right component for letting users enter Money digits.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/moneyfield)

[![NumberField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/numberfield-thumbnail.png)![NumberField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/numberfield-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/numberfield)

[Number​Field](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/numberfield)

[This component is specifically designed for numeric data entry.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/numberfield)

[![PasswordField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/passwordfield-thumbnail.png)![PasswordField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/passwordfield-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/passwordfield)

[Password​Field](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/passwordfield)

[This component is for secure input, it obfuscates any text that users enter.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/passwordfield)

[![Select](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/select-thumbnail.png)![Select](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/select-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/select)

[Select](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/select)

[Use this when you want to give users a predefined list of options to choose from.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/select)

[![TextArea](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/textarea-thumbnail.png)![TextArea](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/textarea-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/textarea)

[Text​Area](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/textarea)

[This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/textarea)

[![TextField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/textfield-thumbnail.png)![TextField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/textfield-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/textfield)

[Text​Field](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/textfield)

[This is your go-to component when you need to let users input textual information.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/textfield)

[![URLField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/urlfield-thumbnail.png)![URLField](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/urlfield-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/urlfield)

[URL​Field](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/urlfield)

[This is the right component for letting users enter a URL.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/urlfield)

## Media

[![Icon](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/icon-thumbnail.png)![Icon](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/icon-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/icon)

[Icon](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/icon)

[This component renders an icon from a predefined list.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/icon)

[![Image](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/image-thumbnail.png)![Image](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/image-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/image)

[Image](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/image)

[Use this when you want to display an image.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/image)

[![ProgressIndicator](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/progressindicator-thumbnail.png)![ProgressIndicator](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/progressindicator-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/progressindicator)

[Progress​Indicator](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/progressindicator)

[Use this component to notify merchants that their action is being processed or loaded.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/progressindicator)

## Other

[![AdminAction](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/adminaction-thumbnail.png)![AdminAction](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/adminaction-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminaction)

[Admin​Action](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminaction)

[AdminAction is a component used by Admin action extensions to configure a primary and secondary action and title.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminaction)

[![AdminBlock](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/adminblock-thumbnail.png)![AdminBlock](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/adminblock-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminblock)

[Admin​Block](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminblock)

[This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminblock)

[![AdminPrintAction](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/adminprintaction-thumbnail.png)![AdminPrintAction](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/adminprintaction-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminprintaction)

[Admin​Print​Action](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminprintaction)

[AdminPrintAction is a component used by admin print action extensions to denote a URL to print.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminprintaction)

[![CustomerSegmentTemplate](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/customersegmenttemplate-thumbnail.png)![CustomerSegmentTemplate](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/customersegmenttemplate-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/customersegmenttemplate)

[Customer​Segment​Template](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/customersegmenttemplate)

[CustomerSegmentTemplate is used to configure a template rendered in the **Customers** section of the Shopify admin.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/customersegmenttemplate)

## Structure

[![BlockStack](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/blockstack-thumbnail.png)![BlockStack](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/blockstack-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/blockstack)

[Block​Stack](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/blockstack)

[This structures layout elements along the vertical axis of the page.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/blockstack)

[![Box](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/box-thumbnail.png)![Box](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/box-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/box)

[Box](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/box)

[This is your foundational structural element for composing UI.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/box)

[![Divider](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/divider-thumbnail.png)![Divider](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/divider-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/divider)

[Divider](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/divider)

[Use this to create a clear visual separation between different elements in your user interface.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/divider)

[![InlineStack](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/inlinestack-thumbnail.png)![InlineStack](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/inlinestack-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/inlinestack)

[Inline​Stack](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/inlinestack)

[Use this to organize layout elements along the horizontal axis of the page.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/inlinestack)

[![Section](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/section-thumbnail.png)![Section](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/section-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/section)

[Section](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/section)

[`Section` is a structural component that allows thematic grouping of content.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/section)

## Titles and text

[![Badge](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/badge-thumbnail.png)![Badge](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/badge-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/badge)

[Badge](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/badge)

[Use this component to inform merchants of the status of an object or of an action that’s been taken.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/badge)

[![Banner](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/banner-thumbnail.png)![Banner](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/banner-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/banner)

[Banner](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/banner)

[Use this component if you need to communicate to merchants in a prominent way.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/banner)

[![Heading](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/heading-thumbnail.png)![Heading](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/heading-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/heading)

[Heading](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/heading)

[Use this to display a title.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/heading)

[![HeadingGroup](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/headinggroup-thumbnail.png)![HeadingGroup](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/headinggroup-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/headinggroup)

[Heading​Group](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/headinggroup)

[This groups headings together, much like the hgroup element in HTML.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/headinggroup)

[![Paragraph](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/paragraph-thumbnail.png)![Paragraph](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/paragraph-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/paragraph)

[Paragraph](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/paragraph)

[Use this to display a block of text similar to the `<p>` tag in HTML.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/paragraph)

[![Text](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/text-thumbnail.png)![Text](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/text-thumbnail.png)](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/text)

[Text](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/text)

[This component renders text.](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/text)