Box
The foundational layout primitive — spacing, radius, background, shadow, border and dimensions driven entirely by design tokens.
zyra-box
API
All inputs and configuration options for zyra-box.
| Prop | Type | Default | Description |
|---|---|---|---|
padding | BoxSpacing | 'none' | Uniform padding from the spacing scale |
paddingX / paddingY | BoxSpacing | undefined | Per-axis padding override |
margin | BoxSpacing | 'none' | Uniform margin from the spacing scale |
rounded | BoxRadius | 'none' | Border radius token |
background | BoxBackground | 'none' | Semantic background or tone variant |
border | boolean | false | Shows a 1px border, tinted to match a tone background |
width / height | string | number | undefined | Numbers are treated as pixels |
minWidth / maxWidth / minHeight / maxHeight | string | number | undefined | Dimension constraints |
overflow | 'visible' | 'hidden' | 'auto' | 'scroll' | 'clip' | 'visible' | Uniform overflow, with overflowX/overflowY overrides |
shadow | 'none' | 'sm' | 'md' | 'lg' | 'none' | Elevation shadow token |
position | 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | 'static' | With optional top/right/bottom/left offsets |
cursor | BoxCursor | 'auto' | Mouse cursor style |
userSelect | 'auto' | 'none' | 'text' | 'all' | 'auto' | Text selection behavior |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Box is a plain, non-semantic wrapper — use it for visual grouping, not in place of semantic HTML