Box Reference
Consulte esta subpágina para ver import, available props, exemplo de uso e controles vivos do component.
Box
Base layout primitive for spacing, flex, grid, borders and semantic container styling.
Use when: Use whenever you need structure or spacing before creating a more specific component.
Import
import { Box } from "@components/index";Example
<Box display="grid" gap="s12" padding="s12" backgroundColor="surfaceMuted" radius="s14" />
Available Props
display"grid" | "flex" | ...
Chooses the layout mode.
gapSpaceToken
Space between children.
paddingSpaceToken
Internal spacing.
backgroundColorColorToken
Semantic background token.
borderColor/borderWidthtyped tokens
Optional border styling.
radiusRadiusToken
Border radius token.
Live Preview
Child A
Child B
Controls
display: grid
display: flex
gap: s8
gap: s12
gap: s16
padding: s8
padding: s12
padding: s16
bg: surfaceMuted
bg: surfaceInfo
bg: surfaceDanger
border: on
radius: s10
radius: s14
radius: full