Theme
Box
A plain region with padding, a background, a border and elevation from tokens.
Examples
surfaceRaised
layer2
elevation md
Props
Box
A plain region with padding, a background, a border and elevation, all from tokens.
| Prop | Type | Default | Description |
|---|---|---|---|
as? | ElementType | "div" | |
padding? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | — | Padding on every side, from the space scale. |
paddingInline? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | — | |
paddingBlock? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | — | |
background? | "surface" | "surfaceRaised" | "layer1" | "layer2" | "layer3" | — | |
border? | boolean | false | |
radius? | "sm" | "md" | "lg" | — | |
elevation? | "sm" | "md" | "lg" | — | |
children? | ReactNode | — |
Accessibility
- No interaction of its own: it is static content, so there is nothing to operate by keyboard.
- Built from logical properties (inline and block), so it mirrors in right-to-left text.