Skip to content
Components

Box

The escape hatch: a raw host element with a className, still checked for tokens-only classes. Box renders the chosen {@link LayoutElement} with no layout opinions of its own (no margin, width, or padding, unlike Container), so it suits decorative wrappers that a styled primitive would visually break. Reach for it only when no styled primitive fits; the className you pass is governed by the same tokens-only scan as everything else. RSC-safe.

Zero-opinion wrapper

Usage

import { Box, BoxProps } from "@instruments/materia-ui/components/box";

Best practices

  • Box renders the chosen element with no layout opinions (no margin/width/padding, unlike Container); use it as a neutral wrapper when a styled primitive would interfere.

  • Use as="span" for a decorative inline wrapper; reach for Box only when no styled primitive fits - its className is still checked for tokens-only classes.

  • as and render are mutually exclusive (render wins, dev-warned); as draws from the closed layout vocabulary.

  • Use as to change the element (a tag); use render only to swap in a component (e.g. a router Link). Never render={<Box as=…/>} - pass as directly.

Props

PropTypeDefaultDescription
as"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Event handlers and the ref accept any host element. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

Also exports

  • interfaceBoxProps

Composition

Used by

MegaMenu, PageToolbar, ProductCard, QuickView, SiteFooter