Box

States

Box is not interactive. By default it renders a <div>; its state does not change with mouse, keyboard or touch.

State	Support	Visual change
Default	Yes	Padding, surface, border and corners from the padding, background, border and radius values
Hover	None	None; the element does not react to the pointer
Pressed	None	None; the element cannot be clicked
Focus	None	None; the element takes no focus and draws no focus ring
Disabled	None	None; it has no action to disable
Selected	None	None; it cannot be selected

Measurements

Box has no fixed size of its own; its size comes from its content and the tokens you pass.

Property	Value	Token
Padding (padding, paddingInline, paddingBlock)	none 0, xxs 2, xs 4, sm 6, md 8, lg 12, xl 16, 2xl 20, 3xl 24, 4xl 32, 5xl 40, 6xl 48, 7xl 56 px	space-{name}
Corner radius	none 0, sm 6, md 8, lg 16 px	radius-sm, radius-md, radius-lg
Border width	1 px; only when border is set	border-width-default
Border colour	default or subtle	color-border-default, color-border-subtle
Surface colour	default, raised, sunken, layer-1, layer-2, layer-3	color-surface-{name}

Tokens

Values are shown for the selected brand; change the brand from the top bar.

Token	Sample	Light mode	Dark mode
--bigbang-space-md		8px8px8px	8px8px8px
--bigbang-space-xl		16px16px16px	16px16px16px
--bigbang-radius-sm		6px6px6px	6px6px6px
--bigbang-radius-md		8px8px8px	8px8px8px
--bigbang-radius-lg		10px10px10px	10px10px10px
--bigbang-border-width-default		1px1px1px	1px1px1px
--bigbang-color-surface-default		#f7f7f7#f7f7f7#f7f7f7	#1e1e1e#1e1e1e#1e1e1e
--bigbang-color-surface-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-surface-sunken		#f5f5f5#f5f5f5#f5f5f5	#171717#171717#171717
--bigbang-color-surface-layer-1		#f5f5f5#f5f5f5#f5f5f5	#262626#262626#262626
--bigbang-color-surface-layer-2		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-color-surface-layer-3		#e5e5e5#e5e5e5#e5e5e5	#404040#404040#404040
--bigbang-color-border-default		#e5e5e5#e5e5e5#e5e5e5	#404040#404040#404040
--bigbang-color-border-subtle		#ededed#ededed#ededed	#303030#303030#303030

Motion and interaction

Interaction	Motion	Reduced motion
Hover, press, focus	None: Box is not interactive	Nothing to reduce
Enter and exit	None: Box uses no duration or easing token; content appears and leaves at once	Nothing to reduce
Layout change	None: the layout changes without a transition when the viewport width changes	Nothing to reduce

Box uses no motion preset; the motion of its children belongs to their own components. For details, see the Motion page.