Skip to main content

Interface: BoxProps

Defined in: components/Box/Box.tsx:122

Props for the Box component.

Extends​

  • Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "className">

Properties​

background?​

optional background?: BoxBackground

Defined in: components/Box/Box.tsx:141

Background from the informational surface palette. none is transparent — Box adds no surface colour unless asked (that is Surface's job).

Default​

'none'

border?​

optional border?: BoxBorder

Defined in: components/Box/Box.tsx:153

Hairline boundary emphasis, drawn with the surface outline width/style. muted is the quiet informational edge; strong a firmer one; none draws no border.

Default​

'none'

children?​

optional children?: ReactNode

Defined in: components/Box/Box.tsx:179

The Box's content.

Overrides​

Omit.children

grow?​

optional grow?: boolean

Defined in: components/Box/Box.tsx:177

Let the Box grow to fill the free space along a flex parent's main axis (flex-grow: 1, with min-width: 0 so it can also shrink past its content). Use it inside a horizontal Stack to make one child — a field, an input — take the remaining width. A structural flex behaviour, not a length.

Default​

false

maxWidth?​

optional maxWidth?: BoxMaxWidth

Defined in: components/Box/Box.tsx:168

Maximum inline size. surface caps at the structural surface width; card caps at the narrow centered-card width (an auth form, a standalone confirmation page — smaller than surface, wider than most form controls); reading caps at the readability measure (long-form text). Pair with marginInline centering via a parent Stack/Grid — Box does not center itself.

Default​

'none'

padding?​

optional padding?: BoxPadding

Defined in: components/Box/Box.tsx:131

Padding on both axes, from the surface inset scale. Overridden per-axis by paddingBlock / paddingInline when those are set.

Default​

'none'

paddingBlock?​

optional paddingBlock?: BoxPadding

Defined in: components/Box/Box.tsx:133

Block-axis (top/bottom) padding from the surface inset scale.

paddingInline?​

optional paddingInline?: BoxPadding

Defined in: components/Box/Box.tsx:135

Inline-axis (start/end) padding from the surface inset scale.

radius?​

optional radius?: BoxRadius

Defined in: components/Box/Box.tsx:146

Corner radius from the semantic radii scale.

Default​

'none'

width?​

optional width?: BoxWidth

Defined in: components/Box/Box.tsx:158

Inline size (width) from the sizing behavior keywords.

Default​

'auto'