Skip to content

Stack

Display elements vertically or horizontally on the page.

Props

Props
Name
Type
Description
Default
asStackAsRoot element.-
children*ReactNodeNoStringsElements to lay out.-
directionResponsiveProp<Direction>Flexbox `flex-direction`.-
alignResponsiveProp<Align>Flexbox `align-items`.-
justifyResponsiveProp<Justify>Flexbox `justify-content`.-
flexstring | numberFlexbox `flex`.-
paddingResponsiveProp<Space>Padding all around, increments of 4px.-
paddingXResponsiveProp<Space>Horizontal padding, increments of 4px.-
paddingYResponsiveProp<Space>Vertical padding, increments of 4px.-
paddingTopResponsiveProp<Space>Top padding, increments of 4px.-
paddingRightResponsiveProp<Space>Right padding, increments of 4px.-
paddingBottomResponsiveProp<Space>Bottom padding, increments of 4px.-
paddingLeftResponsiveProp<Space>Left padding, increments of 4px.-
gapResponsiveProp<Space>Gap unit, increments of 4px.-
debugbooleanVisualize the whitespace.-
classNamestringRoot element class name.-
styleCSSPropertiesRoot element inline styles.-
roleAriaRoleProvide semantic meaning to content.-
data-testidDataTestId-

Gap is a unit on a 4px grid scale.

Code Editor

Padding uses the same scale as gap on a 4px grid scale.

Code Editor

Resize the window to observe changes to the layout.

Code Editor
Code Editor
Code Editor