# Box

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

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

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

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

```

```js
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

value: `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

value: `number | `${number}%``

Adjust the block size.

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

### minBlockSize

value: `number | `${number}%``

Adjust the minimum block size.

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

### maxBlockSize

value: `number | `${number}%``

Adjust the maximum block size.

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

### inlineSize

value: `number | `${number}%``

Adjust the inline size.

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

### minInlineSize

value: `number | `${number}%``

Adjust the minimum inline size.

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

### maxInlineSize

value: `number | `${number}%``

Adjust the maximum inline size.

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

### padding

value: `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

value: `MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>`

Adjust the block-padding.

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

### paddingBlockStart

value: `boolean | SpacingKeyword`

Adjust the block-start padding.

### paddingBlockEnd

value: `boolean | SpacingKeyword`

Adjust the block-end padding.

### paddingInline

value: `MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>`

Adjust the inline padding.

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

### paddingInlineStart

value: `boolean | SpacingKeyword`

Adjust the inline-start padding.

### paddingInlineEnd

value: `boolean | SpacingKeyword`

Adjust the inline-end padding.