Box

Abstract div element to build components and layouts with.

#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.

#Props

Inherits all style props.