Box

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

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

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

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

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

extend('Playground', (root) => {
  const box = root.createComponent(
    Box,
    {padding: 'base'},
    'Box',
  );

  root.appendChild(box);
});

BoxProps

BoxProps

accessibilityRole

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.

blockSize

Adjust the block size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.

minBlockSize

Adjust the minimum block size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.

maxBlockSize

Adjust the maximum block size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.

inlineSize

Adjust the inline size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.

minInlineSize

Adjust the minimum inline size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.

maxInlineSize

Adjust the maximum inline size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.

padding

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

paddingBlock

Adjust the block-padding. - `base none` means block-start padding is `base`, block-end padding is `none`.

paddingBlockStart

Adjust the block-start padding.

paddingBlockEnd

Adjust the block-end padding.

paddingInline

Adjust the inline padding. - `base none` means inline-start padding is `base`, inline-end padding is `none`.

paddingInlineStart

Adjust the inline-start padding.

paddingInlineEnd

Adjust the inline-end padding.

AccessibilityRole

'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic'

MaybeAllBoxEdgesShorthandProperty

T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`

SpacingKeyword

'none' | 'small' | 'base' | 'large'

MaybeTwoBoxEdgesShorthandProperty

T | `${T} ${T}`