Stackalternative
Use Stack for directional layouts with gapBox
Primitive layout component for applying spacing, backgrounds, and borders. A flexible container for building custom layouts.
Setup
import { Box } from '@fragments-sdk/ui';Examples
Default
Basic box with padding
Loading preview...
With Border
Bordered container
Loading preview...
Directional Padding
Different horizontal and vertical padding
Loading preview...
Centered with Auto Margin
Centered content using margin auto
Loading preview...
Directional Borders
Individual border sides
Loading preview...
With Shadow
Box with shadow elevation
Loading preview...
Overflow Hidden
Content overflow clipped
Loading preview...
Text Colors
Text color variants
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | node | Not set | Content to render inside the box |
as | enumdivsectionarticleasidemainheaderfooternavspan | div | HTML element to render |
padding | enumnonexssmmdlgxl | Not set | Padding on all sides |
paddingX | enumnonexssmmdlgxl | Not set | Horizontal padding |
paddingY | enumnonexssmmdlgxl | Not set | Vertical padding |
margin | enumnonexssmmdlgxlauto | Not set | Margin on all sides |
marginX | enumnonexssmmdlgxlauto | Not set | Horizontal margin |
marginY | enumnonexssmmdlgxlauto | Not set | Vertical margin |
background | enumnoneprimarysecondarytertiaryelevated | Not set | Background color |
rounded | enumnonesmmdlgfull | Not set | Border radius |
border | boolean | false | Show border |
borderTop | boolean | false | Show top border only |
borderBottom | boolean | false | Show bottom border only |
borderLeft | boolean | false | Show left border only |
borderRight | boolean | false | Show right border only |
borderColor | enumdefaultstrongaccentdanger | Not set | Border color variant (requires border or directional border) |
shadow | enumnonesmmdlg | Not set | Box shadow |
overflow | enumhiddenautoscrollvisible | Not set | Overflow behavior |
color | enumprimarysecondarytertiaryaccentinverse | Not set | Text color |
display | enumnoneblockinlineinline-blockflexinline-flexgrid | Not set | Display type |
width | union | Not set | Width (CSS value, e.g. "100%", "300px", or number for px) |
minWidth | union | Not set | Min width |
maxWidth | union | Not set | Max width |
height | union | Not set | Height (CSS value) |
minHeight | union | Not set | Min height |
maxHeight | union | Not set | Max height |
className | string | Not set | Additional class name |
style | object | Not set | Inline styles |
Usage Guidelines
When to use
- Applying consistent padding or margin to content sections
- Creating bordered or elevated containers
- Wrapping content with semantic HTML elements
- Building custom layouts not covered by Stack or Grid
When not to use
- Horizontal or vertical stacking (use Stack)
- Grid-based layouts (use Grid)
- Card-like containers with header/body/footer (use Card)
- Simple text styling (use Text)
Best practices
- Use padding props instead of inline styles for consistency
- Choose semantic HTML elements (section, article) where appropriate
- Combine with Stack or Grid for complex layouts
- Use background variants from the design system, not custom colors
- Box forwards DOM props (id, role, aria-*, data-*, event handlers) to the rendered element
Accessibility
- Choose semantic as prop values for proper document structure
- Avoid div-soup; use meaningful elements like section, article
- Ensure proper heading hierarchy within Box containers