Box

GdsBox is a layout primitive - think of it as a styled div that exposes the GDS theme through two convenient props:

• sx - write style rules inline with access to the theme (theme.gds.*, palette, spacing, breakpoints).
• Shorthand spacing props - m, p, mt, px, etc. accept theme spacing units (1 = 8px by default).

Use it to wrap content, build custom layouts, and apply spacing or colors without having to create a brand-new styled component.

Usage

Flex layout

A common pattern: GdsBox as a flex container with weighted children.

Rendering as a different element

Pass component to render GdsBox as any HTML element (or even another React component) while keeping all the styling props.

Props