--- title: UI components api_version: 2024-01 api_name: admin-extensions source_url: html: https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components md: https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components.md --- # UI components ## Actions [![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/button-thumbnail-CChMDNct.png)![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/button-thumbnail-CChMDNct.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/actions/button) [Button](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-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-01/ui-components/actions/button) [![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/link-thumbnail-DDkfKDQ8.png)![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/link-thumbnail-DDkfKDQ8.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/actions/link) [Link](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/actions/link) [This is an interactive component that directs users to a specified URL.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/actions/link) [![Pressable](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/pressable-thumbnail-CbaFGo_O.png)![Pressable](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/pressable-thumbnail-CbaFGo_O.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/actions/pressable) [Pressable](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-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-01/ui-components/actions/pressable) ## Feedback and status indicators [![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/badge-thumbnail-B0_aEd1K.png)![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/badge-thumbnail-B0_aEd1K.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/feedback-and-status-indicators/badge) [Badge](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/feedback-and-status-indicators/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-01/ui-components/feedback-and-status-indicators/badge) [![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/banner-thumbnail-DVLkyd_b.png)![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/banner-thumbnail-DVLkyd_b.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/feedback-and-status-indicators/banner) [Banner](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/feedback-and-status-indicators/banner) [Use this component if you need to communicate to merchants in a prominent way.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/feedback-and-status-indicators/banner) [![ProgressIndicator](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/progressindicator-thumbnail-DR3CZCcb.png)![ProgressIndicator](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/progressindicator-thumbnail-DR3CZCcb.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/feedback-and-status-indicators/progressindicator) [Progress​Indicator](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/feedback-and-status-indicators/progressindicator) [Use this component to notify merchants that their action is being processed or loaded.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/feedback-and-status-indicators/progressindicator) ## Forms [![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/checkbox-thumbnail-COZS19hk.png)![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/checkbox-thumbnail-COZS19hk.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/checkbox) [Checkbox](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-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-01/ui-components/forms/checkbox) [![ChoiceList](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/choicelist-thumbnail-CdWGXXv5.png)![ChoiceList](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/choicelist-thumbnail-CdWGXXv5.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/choicelist) [Choice​List](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-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-01/ui-components/forms/choicelist) [![ColorPicker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2024-01/colorpicker-thumbnail-BVkx_l9F.png)![ColorPicker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2024-01/colorpicker-thumbnail-BVkx_l9F.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/colorpicker) [Color​Picker](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/colorpicker) [Use this component if you need to select a color.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/colorpicker) [![DateField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2024-01/datefield-thumbnail-BHBubNx-.png)![DateField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2024-01/datefield-thumbnail-BHBubNx-.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/datefield) [Date​Field](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/datefield) [This is a form field that lets merchants select a date.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/datefield) [![DatePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2024-01/datepicker-thumbnail-BQgkem0s.png)![DatePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2024-01/datepicker-thumbnail-BQgkem0s.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/datepicker) [Date​Picker](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-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-01/ui-components/forms/datepicker) [![EmailField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/emailfield-thumbnail-ygrswDBc.png)![EmailField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/emailfield-thumbnail-ygrswDBc.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/emailfield) [Email​Field](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/emailfield) [Use this when you need users to provide their email addresses.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/emailfield) [![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/form-thumbnail-btyRtysm.png)![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/form-thumbnail-btyRtysm.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/form) [Form](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/form) [Use this component when you want to collect input from users.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/form) [![MoneyField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2024-01/moneyfield-thumbnail-BWCCfBQR.png)![MoneyField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2024-01/moneyfield-thumbnail-BWCCfBQR.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/moneyfield) [Money​Field](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/moneyfield) [This is the right component for letting users enter Money digits.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/moneyfield) [![NumberField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/numberfield-thumbnail-DAucx0Ph.png)![NumberField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/numberfield-thumbnail-DAucx0Ph.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/numberfield) [Number​Field](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/numberfield) [This component is specifically designed for numeric data entry.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/numberfield) [![PasswordField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/passwordfield-thumbnail-BBR5hILC.png)![PasswordField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/passwordfield-thumbnail-BBR5hILC.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/passwordfield) [Password​Field](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/passwordfield) [This component is for secure input, it obfuscates any text that users enter.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/passwordfield) [![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/select-thumbnail-Bg9G_jSY.png)![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/select-thumbnail-Bg9G_jSY.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/select) [Select](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-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-01/ui-components/forms/select) [![TextArea](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/textarea-thumbnail-PEwwVeyv.png)![TextArea](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/textarea-thumbnail-PEwwVeyv.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/textarea) [Text​Area](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-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-01/ui-components/forms/textarea) [![TextField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/textfield-thumbnail-C3iztj48.png)![TextField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/textfield-thumbnail-C3iztj48.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/textfield) [Text​Field](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-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-01/ui-components/forms/textfield) [![URLField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/urlfield-thumbnail-DynZN2Nk.png)![URLField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/urlfield-thumbnail-DynZN2Nk.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/urlfield) [URL​Field](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/urlfield) [This is the right component for letting users enter a URL.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/forms/urlfield) ## Layout and structure [![BlockStack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/blockstack-thumbnail--ob7DmDU.png)![BlockStack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/blockstack-thumbnail--ob7DmDU.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-structure/blockstack) [Block​Stack](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-structure/blockstack) [This structures layout elements along the vertical axis of the page.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-structure/blockstack) [![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/box-thumbnail-cBqyPyaK.png)![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/box-thumbnail-cBqyPyaK.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-structure/box) [Box](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-structure/box) [This is your foundational structural element for composing UI.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-structure/box) [![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/divider-thumbnail-lx6lCVUx.png)![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/divider-thumbnail-lx6lCVUx.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-structure/divider) [Divider](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-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-01/ui-components/layout-and-structure/divider) [![InlineStack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/inlinestack-thumbnail-CHLto6_E.png)![InlineStack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/inlinestack-thumbnail-CHLto6_E.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-structure/inlinestack) [Inline​Stack](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-structure/inlinestack) [Use this to organize layout elements along the horizontal axis of the page.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/layout-and-structure/inlinestack) ## Media and visuals [![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/admin-extensions/2024-01/ui-components/media-and-visuals/icon) [Icon](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/media-and-visuals/icon) [This component renders an icon from a predefined list.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/media-and-visuals/icon) [![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/image-thumbnail-Decjs73h.png)![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/image-thumbnail-Decjs73h.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/media-and-visuals/image) [Image](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/media-and-visuals/image) [Use this when you want to display an image.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/media-and-visuals/image) ## Settings and templates [![AdminAction](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/adminaction-Dks_E1rR.png)![AdminAction](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/adminaction-Dks_E1rR.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/settings-and-templates/adminaction) [Admin​Action](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/settings-and-templates/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-01/ui-components/settings-and-templates/adminaction) [![AdminBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/adminblock-CMQlUaFH.png)![AdminBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/adminblock-CMQlUaFH.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/settings-and-templates/adminblock) [Admin​Block](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/settings-and-templates/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-01/ui-components/settings-and-templates/adminblock) [![CustomerSegmentTemplate](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/customersegmenttemplate-thumbnail-BN0HdM6-.png)![CustomerSegmentTemplate](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/customersegmenttemplate-thumbnail-BN0HdM6-.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/settings-and-templates/customersegmenttemplate) [Customer​Segment​Template](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/settings-and-templates/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-01/ui-components/settings-and-templates/customersegmenttemplate) ## Typography and content [![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/heading-thumbnail-CgSz-CPp.png)![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/heading-thumbnail-CgSz-CPp.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/typography-and-content/heading) [Heading](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/typography-and-content/heading) [Use this to display a title.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/typography-and-content/heading) [![HeadingGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/headinggroup-thumbnail-D0p5zhQM.png)![HeadingGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/headinggroup-thumbnail-D0p5zhQM.png)](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/typography-and-content/headinggroup) [Heading​Group](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/typography-and-content/headinggroup) [This groups headings together, much like the hgroup element in HTML.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/typography-and-content/headinggroup) [![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/admin-extensions/2024-01/ui-components/typography-and-content/paragraph) [Paragraph](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/typography-and-content/paragraph) [Use this to display a block of text similar to the](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/typography-and-content/paragraph) [tag in HTML.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-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/admin-extensions/2024-01/ui-components/typography-and-content/text) [Text](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/typography-and-content/text) [This component renders text.](https://shopify.dev/docs/api/admin-extensions/2024-01/ui-components/typography-and-content/text)