Box

Box accepts Luke UI layout properties and renders a div by default. It places content in a layout, adds token spacing, constrains an element's size, or controls a flex or grid child. Use a normal div when no supported layout property applies.

Layout properties

Box supports display, logical margin and padding, inline and block sizing, positioning, overflow, gap, flex, and grid-child properties. It does not set grid container properties. Keep grid-template rules in the application CSS or a component that owns that layout.

<Box display="flex" alignItems="center" gap="sp12" maxInlineSize="42rem" paddingInline="sp24">
	{children}
</Box>

Responsive values

Pass a direct value when it does not change. Use an object keyed by breakpoint when it does. Read Layout for the breakpoint list, the cascade from initial, and a worked example.

Spacing values

Padding, gap, and margin accept value-based spacing keys. Read Layout for the full scale and for logical property names.

Choose the rendered element

Set elementType when the layout needs a supported structural element. The prop does not change Box's accepted DOM props. Box owns the element and its DOM attributes.

The supported elements are article, aside, dd, div, dl, dt, figcaption, figure, footer, header, li, main, nav, ol, section, span, and ul.

Own the rendered element

Use render when the callback must own the element and its DOM attributes. The callback can return an appropriate intrinsic element or custom component. It receives resolved children, className, and style props, plus a callback ref.

Put event, accessibility, and element-specific attributes on the element inside the callback.

Do not combine render with elementType. Use Link or Button when you need their behaviour.

Read Composition for the general elementType and render rule.

Visual styles

Box accepts theme-backed background, border colour, radius, and depth values, plus fixed border width and style values. Use a component API for interaction states and typography. When a custom element that is not a Box needs a colour, radius, or depth value, use vars from @luke-ui/react/theme. Read Styling for when to reach for vars, and the token reference for the contract.

API