Components
Box
Layout with a fixed spacing scale and real HTML semantics.
Controls
Example
<Box as="section" direction="row" gap="m" padding="l">
<Badge>One</Badge>
<Badge>Two</Badge>
<Badge>Three</Badge>
</Box>Props
Generated from design-system/primitives.tsx. Native HTML and accessibility props are forwarded. className and style are excluded.
| Prop | Type | Required | Default |
|---|---|---|---|
as | T | No | "div" |
direction | "row" | "column" | No | "column" |
gap | Space | No | "none" |
padding | Space | No | "none" |
align | "start" | "center" | "end" | "stretch" | No | "stretch" |
justify | "start" | "center" | "end" | "between" | No | "start" |
wrap | boolean | No | false |
background | Color | No | None |
border | boolean | No | false |
radius | Radius | No | "none" |
View Box source · design-system/primitives.tsx:30