---
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: 2023-10
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2023-10/ui-components/layout-and-structure/box
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2023-10/ui-components/layout-and-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.

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

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/box-default-DwY2Ox1R.png)

### 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);
  });
  ```