Choose a version:

Box

The box component provides a container for layout and visual styling. Use it to apply padding, borders, and background colors, or to nest and group other components.

For user interaction, use box in combination with interactive components like button or clickable. For scrollable content, use scroll box.

Support

Targets (16)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Box component.

Anchor to blockSize blockSize Default: 'auto': The block size of the container. Auto automatically sizes based on the container's children.
Anchor to id id string: A unique identifier for the element used for targeting with CSS or JavaScript.
Anchor to inlineSize inlineSize Default: 'auto': The inline size of the container. Auto automatically sizes based on the container's children.
Anchor to maxBlockSize maxBlockSize Default: 'none': The maximum block size constraint for the container.
Anchor to maxInlineSize maxInlineSize Default: 'none': The maximum inline size constraint for the container.
Anchor to minBlockSize minBlockSize Default: '0': The minimum block size constraint for the container.
Anchor to minInlineSize minInlineSize Default: '0': The minimum inline size constraint for the container.
Anchor to padding padding <> Default: 'none': The padding applied to all edges of the container. Supports 1-to-4-value syntax using flow-relative values in the order:

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.

An auto value inherits the default padding from the closest container that has removed its usual padding.
Anchor to paddingBlock paddingBlock '' | <> Default: '' - meaning no override: The block-axis padding for the container. Overrides the block value of the padding property.
Anchor to paddingBlockEnd paddingBlockEnd '' | Default: '' - meaning no override: The block-end padding for the container. Overrides the block-end value of the paddingBlock property.
Anchor to paddingBlockStart paddingBlockStart '' | Default: '' - meaning no override: The block-start padding for the container. Overrides the block-start value of the paddingBlock property.
Anchor to paddingInline paddingInline '' | <> Default: '' - meaning no override: The inline-axis padding for the container. Supports two-value syntax where large none sets inline-start to large and inline-end to none. Overrides the inline value of the padding property.
Anchor to paddingInlineEnd paddingInlineEnd '' | Default: '' - meaning no override: The inline-end padding for the container. Overrides the inline-end value of the paddingInline property.
Anchor to paddingInlineStart paddingInlineStart '' | Default: '' - meaning no override: The inline-start padding for the container. Overrides the inline-start value of the paddingInline property.

SizeUnitsOrAuto

Defines size values that can be specified as exact measurements or automatic sizing. Supports pixel values, percentages, zero, or automatic sizing based on content.

SizeUnits | 'auto'

SizeUnits

Defines exact size measurements without automatic or unconstrained options. Limited to specific pixel values, percentages, or zero.

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

SizeUnitsOrNone

Defines size values that can be specified as exact measurements or no constraint. Supports pixel values, percentages, zero, or no maximum limit.

SizeUnits | 'none'

MaybeAllValuesShorthandProperty

A utility type for properties that support [1-to-4-value shorthand syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties#edges_of_a_box).

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

PaddingKeyword

Defines the available padding size options using a semantic scale. Provides consistent spacing values that align with the POS design system.

SizeKeyword | 'none'

SizeKeyword

Defines the available size options for icons using a semantic scale. Provides granular control over icon dimensions from compact inline sizes to prominent display sizes.

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

MaybeTwoValuesShorthandProperty

Defines a shorthand property that accepts either a single value or two space-separated values for directional properties like padding and spacing.

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

Anchor to ExamplesExamples

Anchor to Create a container with a boxCreate a container with a box

Create layouts using a box component. This example demonstrates a basic box container with padding and styling.

Create a container with a box

<s-box padding="base">

<s-text>View shipping settings</s-text>

</s-box>

Anchor to Best practicesBest practices

Use semantic sizing: Choose auto to adapt to content, percentages for responsive layouts, pixels only for exact dimensions.
Use design system padding: Use predefined padding keywords (small, base, large) for consistency.
Use directional padding for asymmetry: Use paddingInline and paddingBlock when different spacing is needed on different sides.
Understand block vs inline: block refers to content flow direction (usually vertical), inline to text direction (usually horizontal).

Was this page helpful?