Box

Box is the design system's generic block container — the catch-all box. It is layout only (ADR-028): display: block plus the structural factory props — spacing (margin/padding), size (width/height), container geometry, and the responsive channels (cq / viewportMedias) — and the native <div> props. It has no background, border, elevation, typography or motion: a Box in a tree always means structure, never a surface.

Box is the sanctioned replacement for a raw <div>. Consumers never render host HTML tags directly — a bare <div> does not exist on non-web targets (a native Android / React-Native surface has no <div>), so reaching for one blocks cross-platform export. Compose DS components instead: Box for a plain block, Flex / Grid for layout, Paper / Card for a visual surface, Text for copy.

When to use

• A plain block wrapper that needs structural props (padding, size, a cq / viewportMedias responsive channel) but not flex or grid layout.
• Anywhere you would otherwise write a raw <div> or reach for the internal Base primitive (which is not public — Box is its consumer-facing face).

Reach for Flex when the wrapper lays its children out on an axis, Grid for two-dimensional layouts, and Paper / Card when the block needs a background, border or shadow — visual chrome does not live on Box.

Basic

A bare block box — the dashed outline is only drawn here to show its bounds; Box itself paints nothing.

<Box p="medium">
  <Text text="…" />
</Box>

Semantic element (as)

Box is polymorphic — render it as any semantic element with as while keeping the factory API. Type a Box layout object as BoxProps when it needs as without a local augmentation.

<Box as="section" p="medium">
  <Text as="h2" text="Rendered as <section>" />
</Box>

See also

• Linear layout: Flex.
• Two-dimensional layout: Grid.
• Block with a depth shadow: Paper.