Box

Box is a plain, non-flex div container for building components and layouts. It accepts color, background, and border tokens.

#Example

#Surface theme

When bg is set to a recognized white token (e.g. white) or grey token (e.g. base.lightBackground, base.background, gray.50–gray.200), Box sets CSS variables on itself that descendant form elements (inputs, selects, comboboxes, badge inputs, textareas) read to invert their resting background:

• On a light surface, form elements rest grey and lift to white on hover/focus.
• On a dark surface, form elements rest white and the hover affordance comes from a darker border instead of flipping the fill.

See Form Elements for an interactive comparison across surfaces.

#Guidelines

#When to use

• When neither Column nor Row fits — for example, a positioned, grid, or plain background container that shouldn't be a flex parent.

#When not to use

• If you're stacking children vertically, use a Column instead.
• If you're placing children side by side, use a Row instead.

#Props

Inherits all style props.