Skip to main content

Box

This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.

Anchor to boxpropsBoxProps

Anchor to accessibilityRole
accessibilityRole
Default: 'generic'

Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.

Anchor to blockSize
blockSize
number | `${number}%`

Adjust the block size.

  • number: size in pixels.
  • `${number}%`: size in percentages of the available space.
Anchor to minBlockSize
minBlockSize
number | `${number}%`

Adjust the minimum block size.

  • number: size in pixels.
  • `${number}%`: size in percentages of the available space.
Anchor to maxBlockSize
maxBlockSize
number | `${number}%`

Adjust the maximum block size.

  • number: size in pixels.
  • `${number}%`: size in percentages of the available space.
Anchor to inlineSize
inlineSize
number | `${number}%`

Adjust the inline size.

  • number: size in pixels.
  • `${number}%`: size in percentages of the available space.
Anchor to minInlineSize
minInlineSize
number | `${number}%`

Adjust the minimum inline size.

  • number: size in pixels.
  • `${number}%`: size in percentages of the available space.
Anchor to maxInlineSize
maxInlineSize
number | `${number}%`

Adjust the maximum inline size.

  • number: size in pixels.
  • `${number}%`: size in percentages of the available space.
Anchor to padding
padding
< | boolean>

Adjust the padding.

To shorten the code, it is possible to specify all the padding for all edges of the box in one property.

  • base means block-start, inline-end, block-end and inline-start paddings are base.
  • base none means block-start and block-end paddings are base, inline-start and inline-end paddings are none.
  • base none large means block-start padding is base, inline-end padding is none, block-end padding is large and inline-start padding is none.
  • base none large small means block-start padding is base, inline-end padding is none, block-end padding is large and inline-start padding is small.
  • true applies a default padding that is appropriate for the component.

Learn more about the 1-to-4-value syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box

Anchor to paddingBlock
paddingBlock
< | boolean>

Adjust the block-padding.

  • base none means block-start padding is base, block-end padding is none.
Anchor to paddingBlockStart
paddingBlockStart
boolean |

Adjust the block-start padding.

Anchor to paddingBlockEnd
paddingBlockEnd
boolean |

Adjust the block-end padding.

Anchor to paddingInline
paddingInline
< | boolean>

Adjust the inline padding.

  • base none means inline-start padding is base, inline-end padding is none.
Anchor to paddingInlineStart
paddingInlineStart
boolean |

Adjust the inline-start padding.

Anchor to paddingInlineEnd
paddingInlineEnd
boolean |

Adjust the inline-end padding.

Was this section helpful?

Use Box to build your layout

import {render, Box} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
return (
<Box padding="base">
Box
</Box>
);
}

Preview