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 .
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Use cases
- Spacing control: Create consistent spacing and padding around content groups.
- Structured layouts: Build layouts by nesting components within Box containers.
- Responsive sizing: Apply sizing that adapts to different screen sizes and orientations.
- Visual grouping: Group related interface elements with consistent boundaries.
Anchor to examplesExamples
Anchor to example-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
Create a container with a box
Examples
Create a container with a box
Description
Create layouts using a `Box` component. This example demonstrates a basic box container with padding and styling.
Default
<s-box padding="base"> <s-text>View shipping settings</s-text> </s-box>
Anchor to propertiesProperties
Configure the following properties on the Box component.
- Anchor to blockSizeblockSizeblockSizeSizeUnitsOrAutoSizeUnitsOrAutoDefault: 'auto'Default: 'auto'
Adjust the block size.
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to inlineSizeinlineSizeinlineSizeSizeUnitsOrAutoSizeUnitsOrAutoDefault: 'auto'Default: 'auto'
Adjust the inline size.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeSizeUnitsOrNoneSizeUnitsOrNoneDefault: 'none'Default: 'none'
Adjust the maximum block size.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeSizeUnitsOrNoneSizeUnitsOrNoneDefault: 'none'Default: 'none'
Adjust the maximum inline size.
- Anchor to minBlockSizeminBlockSizeminBlockSizeSizeUnitsSizeUnitsDefault: '0'Default: '0'
Adjust the minimum block size.
- Anchor to minInlineSizeminInlineSizeminInlineSizeSizeUnitsSizeUnitsDefault: '0'Default: '0'
Adjust the minimum inline size.
- Anchor to paddingpaddingpaddingMaybeAllValuesShorthandProperty<PaddingKeyword>MaybeAllValuesShorthandProperty<PaddingKeyword>Default: 'none'Default: 'none'
Adjust the padding of all edges.
1-to-4-value syntax 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:
largemeans block-start, inline-end, block-end and inline-start paddings arelarge.large nonemeans block-start and block-end paddings arelarge, inline-start and inline-end paddings arenone.large none largemeans block-start padding islarge, inline-end padding isnone, block-end padding islargeand inline-start padding isnone.large none large smallmeans block-start padding islarge, inline-end padding isnone, block-end padding islargeand inline-start padding issmall.
A padding value of
autowill use the default padding for the closest container that has had its usual padding removed.- 4 values:
- Anchor to paddingBlockpaddingBlockpaddingBlock"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-padding.
large nonemeans block-start padding islarge, block-end padding isnone.
This overrides the block value of
padding.- Anchor to paddingBlockEndpaddingBlockEndpaddingBlockEnd"" | PaddingKeyword"" | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-end padding.
This overrides the block-end value of
.- Anchor to paddingBlockStartpaddingBlockStartpaddingBlockStart"" | PaddingKeyword"" | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-start padding.
This overrides the block-start value of
.- Anchor to paddingInlinepaddingInlinepaddingInline"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline padding.
large nonemeans inline-start padding islarge, inline-end padding isnone.
This overrides the inline value of
padding.- Anchor to paddingInlineEndpaddingInlineEndpaddingInlineEnd"" | PaddingKeyword"" | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline-end padding.
This overrides the inline-end value of
.- Anchor to paddingInlineStartpaddingInlineStartpaddingInlineStart"" | PaddingKeyword"" | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline-start padding.
This overrides the inline-start value of
.
SizeUnitsOrAuto
SizeUnits | "auto"SizeUnits
`${number}px` | `${number}%` | `0`SizeUnitsOrNone
SizeUnits | "none"MaybeAllValuesShorthandProperty
T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`PaddingKeyword
SizeKeyword | 'none'SizeKeyword
"small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500"MaybeTwoValuesShorthandProperty
T | `${T} ${T}`Anchor to best-practicesBest practices
- Use semantic sizing: Choose
autoto 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
andwhen different spacing is needed on different sides. - Understand block vs inline:
blockrefers to content flow direction (usually vertical),inlineto text direction (usually horizontal).