Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

View

View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like Grid, BlockStack, InlineStack) that would otherwise stretch their children to fit.

Support
Targets (50)

Supported targets

Anchor to ViewPropsViewProps

Anchor to accessibilityLabel
accessibilityLabel
string

A label announced by assistive technologies that describes the purpose or contents of the element. Only set this when the element's visible content doesn't provide enough context on its own.

Anchor to accessibilityRole
accessibilityRole

The semantic meaning of the component's content. When set, assistive technologies use this role to help users navigate the page. Accepts a single role or a tuple of two roles (for example, ['listItem', 'separator']).

Anchor to accessibilityVisibility
accessibilityVisibility

Controls the visibility of the element to assistive technologies. Set to 'hidden' to hide the element from assistive technologies while keeping it visually visible.

Anchor to background
background
<>
Default: 'transparent'

The background color of the element, set using a design-system keyword.

Anchor to blockAlignment
blockAlignment
< Extract<, 'start' | 'center' | 'end'> >

The alignment of children along the block (cross) axis.

Anchor to border
border
<<>>

The border style of the element. Accepts a single value for all four edges, or a shorthand tuple for per-edge control:

  • 'base': Applies base to all edges.
  • ['base', 'none']: Block edges get base, inline edges get none.
  • ['base', 'none', 'dotted', 'base']: Values apply to block-start, inline-end, block-end, and inline-start respectively.
Anchor to borderWidth
borderWidth
< <> >

The border width of the element. Accepts a single value for all four edges, or a shorthand tuple for per-edge control:

  • 'base': Applies base to all edges.
  • ['base', 'medium']: Block edges get base, inline edges get medium.
  • ['base', 'medium', 'medium', 'base']: Values apply to block-start, inline-end, block-end, and inline-start respectively.
Anchor to cornerRadius
cornerRadius
< <> >

The corner radius of the element. Accepts a single value for all four corners, or a shorthand tuple for per-corner control using logical (writing-mode-aware) corners:

  • 'base': All four corners get base radius.
  • ['base', 'none']: StartStart/EndEnd get base, StartEnd/EndStart get none. In left-to-right mode, StartStart and EndEnd are the top-left and bottom-right corners.
  • ['base', 'none', 'small', 'base']: Values apply to StartStart, StartEnd, EndEnd, and EndStart respectively.

A borderRadius alias is available. When both are set, cornerRadius takes precedence.

Anchor to display
display
<>
Default: 'auto'

The display mode of the component. Learn more about display.

Anchor to id
id
string

A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.

Anchor to inlineAlignment
inlineAlignment
<>

The alignment of children along the inline (main) axis.

Anchor to inlineSize
inlineSize
<'fill'>

The inline size of the View.

  • fill: Takes all the available space.
Anchor to maxBlockSize
maxBlockSize
< number | `${number}%` | 'fill' >

The maximum block size (maximum height in horizontal writing modes). The element won't grow taller than this value even if its content is longer.

  • number: The size in pixels.
  • `${number}%`: The size as a percentage of the parent container's block size.
  • 'fill': Takes all the available space.

Learn more about the max-block-size property.

Anchor to maxInlineSize
maxInlineSize
< number | `${number}%` | 'fill' >

The maximum inline size (maximum width in horizontal writing modes). The element won't grow wider than this value.

  • number: The size in pixels.
  • `${number}%`: The size as a percentage of the parent container's inline size.
  • 'fill': Takes all the available space.

Learn more about the max-inline-size property.

Anchor to minBlockSize
minBlockSize
< number | `${number}%` | 'fill' >

The minimum block size (minimum height in horizontal writing modes). The element won't shrink smaller than this value even if its content is shorter.

  • number: The size in pixels.
  • `${number}%`: The size as a percentage of the parent container's block size.
  • 'fill': Takes all the available space.

Learn more about the min-block-size property.

Anchor to minInlineSize
minInlineSize
< number | `${number}%` | 'fill' >

The minimum inline size (minimum width in horizontal writing modes). The element won't shrink narrower than this value.

  • number: The size in pixels.
  • `${number}%`: The size as a percentage of the parent container's inline size.
  • 'fill': Takes all the available space.

Learn more about the min-inline-size property.

Anchor to opacity
opacity

The opacity of the View, applied to the background and all children. Use carefully as reduced opacity can decrease contrast ratios, resulting in inaccessible text.

Anchor to overflow
overflow
'hidden' | 'visible'
Default: 'visible'

The overflow behavior of the element.

  • hidden: Content that extends beyond the container is clipped and not scrollable.
  • visible: Content that extends beyond the container is visible.
Anchor to padding
padding
<<>>

The padding on all edges of the element, using a shorthand syntax. You can specify one, two, or four values following the CSS shorthand convention.

  • T: A single value applied uniformly to all edges.
  • [T, T]: The first value applies to block-start and block-end, the second to inline-start and inline-end.
  • [T, T, T, T]: Values apply to block-start, inline-end, block-end, and inline-start respectively.
Anchor to position
position
<>

Changes how the View is positioned. When setting position, set each axis only once.

<View position={{blockStart, inlineEnd}} /> // Allowed; sets the `block` and `inline` axes once each <div class="hydrate" data-language="" data-content="" data-markdown="remove"></div><pre class="hidden"><code class="language-"></code></pre> <View position={{inlineStart, blockEnd}} /> // Allowed; sets the `inline` and `block` axes once each <div class="hydrate" data-language="" data-content="" data-markdown="remove"></div><pre class="hidden"><code class="language-"></code></pre> <View position={{blockStart, blockEnd}} /> // Not allowed; sets the `block` axis twice <div class="hydrate" data-language="" data-content="" data-markdown="remove"></div><pre class="hidden"><code class="language-"></code></pre> <View position={{inlineStart, inlineEnd}} /> // Not allowed; sets the `inline` axis twice

Anchor to translate
translate
<>

A two-dimensional translation of the View along the block and inline axes.

Anchor to visibility
visibility

Controls the visual visibility of the element. Set to 'hidden' to visually hide the element while keeping it accessible to assistive technologies.

Anchor to borderRadius
borderRadius
< <> >

The corner radius of the element. Accepts a single value for all four corners, or a shorthand tuple for per-corner control:

  • 'base': All four corners get base radius.
  • ['base', 'none']: StartStart/EndEnd get base, StartEnd/EndStart get none.
  • ['base', 'none', 'small', 'base']: Values apply to StartStart, StartEnd, EndEnd, and EndStart respectively.
Deprecated

Use cornerRadius instead.

Anchor to ExamplesExamples

Anchor to Basic ViewBasic View

Basic View

Example

Basic View

import {
reactExtension,
View,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<View padding="base" border="base">
View
</View>
);
}
import {extension, View} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
const view = root.createComponent(
View,
{border: 'base', padding: 'base'},
'View',
);

root.appendChild(view);
});

Anchor to Accessibility rolesAccessibility roles

ValueDescription
"main"Used to indicate the primary content.
"header"Used to indicate the component is a header.
"footer"Used to display information such as copyright information, navigation links, and privacy statements.
"section"Used to indicate a generic section.
"complementary"Used to designate a supporting section that relates to the main content.
"navigation"Used to identify major groups of links used for navigating.
"orderedList"Used to identify a list of ordered items.
"listItem"Used to identify an item inside a list of items.
"unorderedList"Used to identify a list of unordered items.
"separator"Used to indicates the component acts as a divider that separates and distinguishes sections of content.
"status"Used to define a live region containing advisory information for the user that is not important enough to be an alert.
"alert"Used for important, and usually time-sensitive, information.

Anchor to RelatedRelated

UtilityStyleHelper
Was this page helpful?