---
title: Box
description: A generic container that provides flexible layout with consistent spacing and styling. Use it to apply padding, to nest and group other components, or as the foundation for building structured layouts.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsstructure/box
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsstructure/box.md
---

# Box

A generic container that provides flexible layout with consistent spacing and styling. Use it to apply padding, to nest and group other components, or as the foundation for building structured layouts.

## Properties

* blockSize

  SizeUnitsOrAuto

  Default: 'auto'

  Adjust the block size.

* id

  string

  A unique identifier for the element.

* inlineSize

  SizeUnitsOrAuto

  Default: 'auto'

  Adjust the inline size.

* maxBlockSize

  SizeUnitsOrNone

  Default: 'none'

  Adjust the maximum block size.

* maxInlineSize

  SizeUnitsOrNone

  Default: 'none'

  Adjust the maximum inline size.

* minBlockSize

  SizeUnits

  Default: '0'

  Adjust the minimum block size.

* minInlineSize

  SizeUnits

  Default: '0'

  Adjust the minimum inline size.

* padding

  MaybeAllValuesShorthandProperty\<PaddingKeyword>

  Default: 'none'

  Adjust the padding of all edges.

  [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:

  * 4 values: `block-start inline-end block-end inline-start`
  * 3 values: `block-start inline block-end`
  * 2 values: `block inline`

  For example:

  * `large` means block-start, inline-end, block-end and inline-start paddings are `large`.
  * `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.
  * `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
  * `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.

  A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.

* paddingBlock

  '' | MaybeTwoValuesShorthandProperty\<PaddingKeyword>

  Default: '' - meaning no override

  Adjust the block-padding.

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

  This overrides the block value of `padding`.

* paddingBlockEnd

  '' | PaddingKeyword

  Default: '' - meaning no override

  Adjust the block-end padding.

  This overrides the block-end value of `paddingBlock`.

* paddingBlockStart

  '' | PaddingKeyword

  Default: '' - meaning no override

  Adjust the block-start padding.

  This overrides the block-start value of `paddingBlock`.

* paddingInline

  '' | MaybeTwoValuesShorthandProperty\<PaddingKeyword>

  Default: '' - meaning no override

  Adjust the inline padding.

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

  This overrides the inline value of `padding`.

* paddingInlineEnd

  '' | PaddingKeyword

  Default: '' - meaning no override

  Adjust the inline-end padding.

  This overrides the inline-end value of `paddingInline`.

* paddingInlineStart

  '' | PaddingKeyword

  Default: '' - meaning no override

  Adjust the inline-start padding.

  This overrides the inline-start value of `paddingInline`.

### SizeUnitsOrAuto

```ts
SizeUnits | 'auto'
```

### SizeUnits

```ts
`${number}px` | `${number}%` | `0`
```

### SizeUnitsOrNone

```ts
SizeUnits | 'none'
```

### MaybeAllValuesShorthandProperty

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

### PaddingKeyword

```ts
SizeKeyword | 'none'
```

### SizeKeyword

```ts
'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'
```

### MaybeTwoValuesShorthandProperty

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

### Examples

* #### Code

  ##### Default

  ```html
  <s-box padding="base">
    <s-text>View shipping settings</s-text>
  </s-box>
  ```

## Preview

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