Stack

The stack primitive is used to distribute items along the horizontal or vertical axis, with even spacing between the items.

Usage

Gap

Any of our spacing tokens from core are acceptable as a gap value.

  • none
  • xsmall
  • small
  • gutter
  • medium
  • large
  • xlarge
  • xxlarge

Orientation

Defines the direction to layout the items within the stack.

  • vertical (default)
  • horizontal

This makes Stack very versatile...

HK
Herschel Krustofsky
Entertainer

Props

align
"center" │ "end" │ "start" │ "stretch"
"stretch"
background
"none" │ "default" │ "sunken" │ "elevated"
basis
number │ string
children
node
dividers
"none" | "around" | "between" | "start" | "end"
"none"
flex
number │ string
gap
custom
"none"
grow
number
height
number
justify
"around" │ "between" │ "center" │ "end" │ "even" │ "start" │ "stretch"
margin
custom
marginBottom
custom
marginLeft
custom
marginRight
custom
marginTop
custom
marginX
custom
marginY
custom
orientation
"horizontal" │ "vertical"
"vertical"
padding
custom
paddingBottom
custom
paddingLeft
custom
paddingRight
custom
paddingTop
custom
paddingX
custom
paddingY
custom
rounding
enum
roundingBottom
enum
roundingLeft
enum
roundingRight
enum
roundingTop
enum
shrink
number
style
custom
width
number