Skip to content
← Inventory

Box

The sanctioned escape hatch — a raw host element with a className, still policed by tokens-only. Box renders the chosen {@link LayoutElement} with ZERO opinions of its own (no margin, width, or padding, unlike Container), so it is the honest neutral node for 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 "@desk/ui/components/box";

Best practices

  • Box renders the chosen element with ZERO layout opinions (no margin/width/padding, unlike Container) — the honest wrapper when a styled primitive would visually interfere.

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

Props

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

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. Ref and event-handler types remain the default element's (HTMLDivElement).

Also exports

  • interfaceBoxProps

Composition

Used by

ProductCard