---
title: Box
description: >-
  This is your foundational structural element for composing UI. It can be
  styled using predefined tokens. Use it to build your layout.
api_version: 2024-10
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/box
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/box.md
---

# Box

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

## BoxProps

* 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.

* blockSize

  number | \`${number}%\`

  Adjust the block size.

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

* display

  'auto' | 'none'

  Default: 'auto'

  The display property sets the display behavior of an element.

* inlineSize

  number | \`${number}%\`

  Adjust the inline size.

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

* maxBlockSize

  number | \`${number}%\`

  Adjust the maximum block size.

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

* maxInlineSize

  number | \`${number}%\`

  Adjust the maximum inline size.

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

* minBlockSize

  number | \`${number}%\`

  Adjust the minimum block size.

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

* minInlineSize

  number | \`${number}%\`

  Adjust the minimum inline size.

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

* padding

  MaybeAllBoxEdgesShorthandProperty\<SpacingKeyword | 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>

* paddingBlock

  MaybeTwoBoxEdgesShorthandProperty\<SpacingKeyword | boolean>

  Adjust the block-padding.

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

* paddingBlockEnd

  SpacingKeyword | boolean

  Adjust the block-end padding.

* paddingBlockStart

  SpacingKeyword | boolean

  Adjust the block-start padding.

* paddingInline

  MaybeTwoBoxEdgesShorthandProperty\<SpacingKeyword | boolean>

  Adjust the inline padding.

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

* paddingInlineEnd

  SpacingKeyword | boolean

  Adjust the inline-end padding.

* paddingInlineStart

  SpacingKeyword | boolean

  Adjust the inline-start padding.

### AccessibilityRole

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

### MaybeAllBoxEdgesShorthandProperty

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

### SpacingKeyword

```ts
'none' | 'small' | 'base' | 'large'
```

### MaybeTwoBoxEdgesShorthandProperty

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

### Examples

* #### Use Box to build your layout

  ##### React

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

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

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

  ##### JS

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

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

    root.appendChild(box);
  });
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-10/box-default.png)