---
title: Components
api_version: 2024-07
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/components
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/components.md
---

# Components

## Actions

[![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/button-thumbnail-DCGzyj8G.png)![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/button-thumbnail-DCGzyj8G.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/button)

[Button](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/button)

[Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/button)

[![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/link-thumbnail-BfYvwrJP.png)![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/link-thumbnail-BfYvwrJP.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/link)

[Link](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/link)

[Link makes text interactive so customers can perform an action, such as navigating to another location.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/link)

[![Pressable](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/pressable-thumbnail-VD8PLhvg.png)![Pressable](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/pressable-thumbnail-VD8PLhvg.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/pressable)

[Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/pressable)

[Pressable is a generic interactive component.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/pressable)

## Feedback

[![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-04/badge-thumbnail-BtsG1EN7.png)![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-04/badge-thumbnail-BtsG1EN7.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/badge)

[Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/badge)

[Use badges to highlight contextual information, like a label or a status, about an object.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/badge)

[![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/banner-thumbnail-DE-d_upI.png)![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/banner-thumbnail-DE-d_upI.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/banner)

[Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/banner)

[Use banners to communicate important messages to customers in a prominent way.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/banner)

[![Progress](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-07/progress-thumbnail-D0wO0mxa.png)![Progress](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-07/progress-thumbnail-D0wO0mxa.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/progress)

[Progress](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/progress)

[Use to visually represent the completion of a task or process.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/progress)

[![SkeletonImage](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/skeletonimage-thumbnail-eX5PDz6I.png)![SkeletonImage](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/skeletonimage-thumbnail-eX5PDz6I.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletonimage)

[Skeleton​Image](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletonimage)

[SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletonimage)

[![SkeletonText](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/skeletontext-thumbnail-BANT6RYn.png)![SkeletonText](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/skeletontext-thumbnail-BANT6RYn.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletontext)

[Skeleton​Text](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletontext)

[SkeletonText is used to provide a low fidelity representation of text content before it appears on the page.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletontext)

[![SkeletonTextBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/skeletontextblock-thumbnail-i4xNvlQQ.png)![SkeletonTextBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/skeletontextblock-thumbnail-i4xNvlQQ.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletontextblock)

[Skeleton​Text​Block](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletontextblock)

[SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletontextblock)

[![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/spinner-thumbnail-CjRn9iYx.png)![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/spinner-thumbnail-CjRn9iYx.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/spinner)

[Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/spinner)

[Spinner is used to notify buyers that their action is being processed.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/spinner)

## Forms

[![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/checkbox-thumbnail-CntFeFXp.png)![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/checkbox-thumbnail-CntFeFXp.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/checkbox)

[Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/checkbox)

[Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/checkbox)

[![Choice](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/choice-thumbnail-XDsz5z12.png)![Choice](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/choice-thumbnail-XDsz5z12.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/choice)

[Choice](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/choice)

[Options inside a `ChoiceList`.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/choice)

[![ChoiceList](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/choicelist-thumbnail-fTSlp-IU.png)![ChoiceList](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/choicelist-thumbnail-fTSlp-IU.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/choicelist)

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

[Use choice lists to present a list of choices where buyers can make a single selection or multiple selections.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/choicelist)

[![ConsentCheckbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-10/consent-checkbox-thumbnail-j714fHtS.png)![ConsentCheckbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-10/consent-checkbox-thumbnail-j714fHtS.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/consentcheckbox)

[Consent​Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/consentcheckbox)

[Use buyer consent checkboxes for collecting the buyer's approval for a given policy.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/consentcheckbox)

[![ConsentPhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-10/consent-phonefield-thumbnail-DRBEwu8c.png)![ConsentPhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-10/consent-phonefield-thumbnail-DRBEwu8c.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/consentphonefield)

[Consent​Phone​Field](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/consentphonefield)

[Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/consentphonefield)

[![DateField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/datefield-thumbnail-Chg9Tjo5.png)![DateField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/datefield-thumbnail-Chg9Tjo5.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/datefield)

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

[Use a date field to get a date input from a customer.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/datefield)

[![DatePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/datepicker-thumbnail-DK2kYMLM.png)![DatePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/datepicker-thumbnail-DK2kYMLM.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/datepicker)

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

[The DatePicker component is a calendar picker UI that allows users to select a single date or a date range](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/datepicker)

[![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/form-thumbnail-BrcOInXb.png)![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/form-thumbnail-BrcOInXb.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/form)

[Form](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/form)

[The form component should be used to wrap one or more form controls.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/form)

[![PhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/phonefield-thumbnail-CHAvnFU7.png)![PhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/phonefield-thumbnail-CHAvnFU7.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/phonefield)

[Phone​Field](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/phonefield)

[A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/phonefield)

[![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/select-thumbnail-alK-t_xZ.png)![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/select-thumbnail-alK-t_xZ.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/select)

[Select](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/select)

[Selects let buyers choose one option from an options menu.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/select)

[![Stepper](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/stepper-thumbnail-HJ90J8XP.png)![Stepper](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/stepper-thumbnail-HJ90J8XP.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/stepper)

[Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/stepper)

[Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/stepper)

[![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-07/switch-thumbnail-4XWp77WO.png)![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-07/switch-thumbnail-4XWp77WO.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/switch)

[Switch](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/switch)

[Use a switch to represent an on or off state that takes effect immediately when tapped.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/switch)

[![TextField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/textfield-thumbnail-DJAeq7KS.png)![TextField](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/textfield-thumbnail-DJAeq7KS.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/textfield)

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

[Use a text field to get text input from a customer.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/textfield)

[![ToggleButton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/togglebutton-thumbnail-BCY0NmMe.png)![ToggleButton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/togglebutton-thumbnail-BCY0NmMe.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/togglebutton)

[Toggle​Button](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/togglebutton)

[Options inside a ToggleButtonGroup.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/togglebutton)

[![ToggleButtonGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/togglebuttongroup-thumbnail-C5akmqK6.png)![ToggleButtonGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/togglebuttongroup-thumbnail-C5akmqK6.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/togglebuttongroup)

[Toggle​Button​Group](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/togglebuttongroup)

[`ToggleButtonGroup` allows you to make a single choice out of the number of options provided.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/togglebuttongroup)

## Interactive

[![Disclosure](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/disclosure-thumbnail-VjA7wyX5.png)![Disclosure](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/disclosure-thumbnail-VjA7wyX5.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/disclosure)

[Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/disclosure)

[Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/disclosure)

[![Map](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/map-thumbnail-B5DdqsSg.png)![Map](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/map-thumbnail-B5DdqsSg.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/map)

[Map](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/map)

[Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/map)

[![MapMarker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/mapmarker-thumbnail-BZ9T0JS0.png)![MapMarker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/mapmarker-thumbnail-BZ9T0JS0.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/mapmarker)

[Map​Marker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/mapmarker)

[MapMarker represents a specific location or point of interest on a map.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/mapmarker)

[![MapPopover](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/mappopover-thumbnail-BBcCsfcU.png)![MapPopover](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/mappopover-thumbnail-BBcCsfcU.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/mappopover)

[Map​Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/mappopover)

[MapPopover provides additional information or context about a specific location or point of interest on a map.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/mappopover)

## Media

[![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/icon-thumbnail-zgeOmgzK.png)![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/icon-thumbnail-zgeOmgzK.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/icon)

[Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/icon)

[Icons are pictograms or graphic symbols.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/icon)

[![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/image-thumbnail-BXLxE2EI.png)![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/image-thumbnail-BXLxE2EI.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/image)

[Image](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/image)

[Image is used for large format, responsive images.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/image)

[![PaymentIcon](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-10/paymenticon-thumbnail-CjnpopSf.png)![PaymentIcon](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-10/paymenticon-thumbnail-CjnpopSf.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/paymenticon)

[Payment​Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/paymenticon)

[Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/paymenticon)

[![ProductThumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-10/productthumbnail-thumbnail-mojfxqDM.png)![ProductThumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-10/productthumbnail-thumbnail-mojfxqDM.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/productthumbnail)

[Product​Thumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/productthumbnail)

[Product thumbnail is a representation of a product image.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/productthumbnail)

## Other

[![List](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/list-thumbnail-BkisObB0.png)![List](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/list-thumbnail-BkisObB0.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/list)

[List](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/list)

[Lists display a set of related content.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/list)

[![ListItem](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/listitem-thumbnail-BcwEE40O.png)![ListItem](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/listitem-thumbnail-BcwEE40O.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/listitem)

[List​Item](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/listitem)

[List items are used as children of the `List` component.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/listitem)

[![Tag](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/tag-thumbnail-B6TOXuLq.png)![Tag](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/tag-thumbnail-B6TOXuLq.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/tag)

[Tag](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/tag)

[A Tag is used to help label, organize or categorize objects.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/tag)

## Overlays

[![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/modal-thumbnail-D6LF_aMm.png)![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/modal-thumbnail-D6LF_aMm.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/modal)

[Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/modal)

[Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/modal)

[![Popover](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/popover-thumbnail-A47HYwog.png)![Popover](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/popover-thumbnail-A47HYwog.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/popover)

[Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/popover)

[Popovers are similar to tooltips.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/popover)

[![Sheet](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-04/sheet-thumbnail-BRUe5j22.png)![Sheet](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-04/sheet-thumbnail-BRUe5j22.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/sheet)

[Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/sheet)

[The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/sheet)

[![Tooltip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/tooltip-thumbnail-BZcNmLKG.png)![Tooltip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/tooltip-thumbnail-BZcNmLKG.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/tooltip)

[Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/tooltip)

[Tooltips are floating labels that briefly explain the function of a user interface element.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/tooltip)

## Structure

[![BlockLayout](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/blocklayout-thumbnail-EoJS188r.png)![BlockLayout](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/blocklayout-thumbnail-EoJS188r.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blocklayout)

[Block​Layout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blocklayout)

[BlockLayout is used to lay out content over multiple rows.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blocklayout)

[![BlockSpacer](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/blockspacer-thumbnail-Bf3Jl0nQ.png)![BlockSpacer](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/blockspacer-thumbnail-Bf3Jl0nQ.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blockspacer)

[Block​Spacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blockspacer)

[BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blockspacer)

[![BlockStack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/blockstack-thumbnail-BnlNIcxL.png)![BlockStack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/blockstack-thumbnail-BnlNIcxL.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blockstack)

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

[BlockStack is used to vertically stack elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blockstack)

[![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/divider-thumbnail-D1W9Pntx.png)![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/divider-thumbnail-D1W9Pntx.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/divider)

[Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/divider)

[A divider separates content and represents a thematic break between elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/divider)

[![Grid](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/grid-thumbnail-CMXh9k0l.png)![Grid](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/grid-thumbnail-CMXh9k0l.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/grid)

[Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/grid)

[Grid is used to lay out content in a matrix of rows and columns.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/grid)

[![GridItem](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/griditem-thumbnail-C43JFS7D.png)![GridItem](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/griditem-thumbnail-C43JFS7D.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/griditem)

[Grid​Item](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/griditem)

[GridItem can be used as children of Grid.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/griditem)

[![InlineLayout](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/inlinelayout-thumbnail-J_OSsoFQ.png)![InlineLayout](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/inlinelayout-thumbnail-J_OSsoFQ.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinelayout)

[Inline​Layout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinelayout)

[InlineLayout is used to lay out content over multiple columns.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinelayout)

[![InlineSpacer](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/inlinespacer-thumbnail-DJ14BOLQ.png)![InlineSpacer](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/inlinespacer-thumbnail-DJ14BOLQ.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinespacer)

[Inline​Spacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinespacer)

[InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinespacer)

[![InlineStack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/inlinestack-thumbnail-DyRLjBpe.png)![InlineStack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/inlinestack-thumbnail-DyRLjBpe.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinestack)

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

[InlineStack is used to lay out a horizontal row of elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinestack)

[![ScrollView](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/scrollview-thumbnail-DkbW3ZR9.png)![ScrollView](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/scrollview-thumbnail-DkbW3ZR9.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/scrollview)

[Scroll​View](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/scrollview)

[ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/scrollview)

[![View](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/view-thumbnail-BmFiLyUv.png)![View](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/view-thumbnail-BmFiLyUv.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/view)

[View](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/view)

[View is a generic container component.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/view)

## Titles and text

[![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/heading-thumbnail-BihHp9Vx.png)![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/heading-thumbnail-BihHp9Vx.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/heading)

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

[Headings control the visual style of headings.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/heading)

[![HeadingGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/headinggroup-thumbnail-nZK8XUyJ.png)![HeadingGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/headinggroup-thumbnail-nZK8XUyJ.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/headinggroup)

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

[Heading group controls the heading level of headings nested within it, like H1, H2, H3.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/headinggroup)

[![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/text-thumbnail-9N4kW_B5.png)![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/text-thumbnail-9N4kW_B5.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/text)

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

[Text is used to visually style and provide semantic value for a small piece of text content.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/text)

[![TextBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/textblock-thumbnail-C4B9zAt3.png)![TextBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/textblock-thumbnail-C4B9zAt3.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/textblock)

[Text​Block](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/textblock)

[Text block is used to render a block of text that occupies the full width available, like a paragraph.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/textblock)

## Utilities

[Style​Helper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/utilities/stylehelper)

[This is a helper for authoring conditional values for property styles.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/utilities/stylehelper)