Stack

The Stack component is used to create space between sibling components. It should be used to compose groups of components in a consistent manner.

By default, the gap is applied on the y axis (vertically), but it can also be applied horizontally.

Props

Name	Type	Default	Description
`gap`	number \| string \| (string \| number)[]	1	The gap size can be a spacing value from the theme, an absolute value, or an array thereof to create a responsive gap.
`axis`	'x' \| 'y'	'y'	The axis on which the gap is applied to children.

Usage


<Stack>
  <Text>
    Sail suscipit island ferries amet ante sollicitudin sea island sail in sail sollicitudin. Ut tortor, ferries euismod amet sollicitudin, island, dolor sail malesuada euismod porttitor sail. Vivamus euismod channel sail ferries island ferries sea ferries amet. Sed ut island est channel ferries ut ferries channel ut sea island risus faucibus.
  </Text>
  <Text>
  Channel nunc sit sail amet island sail ferries vestibulum sea condimentum porttitor. Amet in hendrerit sit vivamus aenean porttitor sail ferries, consectetur ferries sail ferries. Ferries hendrerit, channel ut euismod dolor sapien tortor sea tortor sit. Channel sea sail nunc sea quis aenean.
  </Text>
</Stack><Stack>
  <Text>
    Sail suscipit island ferries amet ante sollicitudin sea island sail in sail sollicitudin. Ut tortor, ferries euismod amet sollicitudin, island, dolor sail malesuada euismod porttitor sail. Vivamus euismod channel sail ferries island ferries sea ferries amet. Sed ut island est channel ferries ut ferries channel ut sea island risus faucibus.
  </Text>
  <Text>
  Channel nunc sit sail amet island sail ferries vestibulum sea condimentum porttitor. Amet in hendrerit sit vivamus aenean porttitor sail ferries, consectetur ferries sail ferries. Ferries hendrerit, channel ut euismod dolor sapien tortor sea tortor sit. Channel sea sail nunc sea quis aenean.
  </Text>
</Stack>

Axis


<Stack axis='x'>
  <Button>
    Timetables
  </Button>
  <Button>
    Service status
  </Button>
</Stack><Stack axis='x'>
  <Button>
    Timetables
  </Button>
  <Button>
    Service status
  </Button>
</Stack>

Responsive gap


<Stack axis='x' gap={[1, 3]}>
  <Button>
    Timetables
  </Button>
  <Button>
    Service status
  </Button>
</Stack><Stack axis='x' gap={[1, 3]}>
  <Button>
    Timetables
  </Button>
  <Button>
    Service status
  </Button>
</Stack>

Absolute gap


<Stack axis='x' gap='5rem'>
  <Button>
    Timetables
  </Button>
  <Button>
    Service status
  </Button>
</Stack><Stack axis='x' gap='5rem'>
  <Button>
    Timetables
  </Button>
  <Button>
    Service status
  </Button>
</Stack>