Stack
A flexbox-based layout component for arranging items vertically or horizontally with consistent spacing.
Vertical Stack (Default)
Item 1
Item 2
Item 3
Horizontal Stack
Item 1
Item 2
Item 3
Spacing
Large Spacing
Large Spacing
Alignment
Props
| Name | Type | Default | Description |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | 'vertical' | Stack direction |
spacing | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Space between items |
align | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | Cross-axis alignment |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'start' | Main-axis alignment |
wrap | boolean | false | Allow items to wrap |
Usage Guidelines
When to use
- •For arranging form fields vertically with consistent spacing
- •For creating button toolbars with horizontal alignment
- •For vertical content sections with predictable gaps
- •For card layouts that need flexible alignment options
Best practices
- •Use Stack instead of manual flexbox to ensure consistent spacing tokens
- •Prefer vertical direction (default) for form layouts and content sections
- •Use horizontal direction for button groups and inline controls
- •Choose spacing values based on content relationship (sm for tight groups, lg for distinct sections)
Accessibility
- •Stack maintains logical DOM order for screen reader navigation
- •Sufficient spacing improves target size for touch interactions
- •Visual grouping through spacing helps cognitive understanding
Do's and Don'ts
✓ Do
- •Use Stack for consistent spacing and alignment
- •Choose spacing values that reflect content relationships
- •Nest Stacks for complex layouts with different spacing needs
Section Title
Related content 1
Related content 2
✗ Don't
- •Don't use manual flexbox with hardcoded gap values
- •Don't use the same spacing for unrelated content groups
- •Don't forget to consider alignment needs for mixed content sizes
Section Title
Content with manual flexbox
Related Components
Button
Often arranged in horizontal Stacks for toolbars
Card
Cards often contain Stacks for internal content layout
Spacing System
Learn about spacing tokens used by Stack