Stack

Live example


Implementation

Stacks can be responsive by passing an array value to the spaceBetween prop. The first value will be the default, the second from the smallAndUp breakpoint, the third from the mediumAndUp breakpoint, and so on.


Properties

Name

Values

Default

spaceBetween (required)
Array values are responsive and change with breakpoint

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15

Array< 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 >

4

orientation

'horizontal' | 'vertical'

vertical

JSX.IntrinsicElements["div"]

 

Native Properties

Name

Values

Default

spaceBetween (required)

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15

Array<1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15>

 

children

ReactNode

 

ViewProps

 


Composition

Stack composition 1
  1. Margin

Tokens

 

Margin

space-100