Skip to content
Vy logo
Components

Stack

Stacks are used to give their children equal spacing between them.

Examples

A simple stack

<Stack>
  <Text>Her er et avsnitt</Text>
  <Text>Her er et avsnitt til</Text>
  <Text>Her er enda et avsnitt</Text>
</Stack>

A stack with custom spacing

<Stack gap="2">
  <Text>Her er et avsnitt</Text>
  <Text>Her er et avsnitt til</Text>
  <Text>Her er enda et avsnitt</Text>
</Stack>

A horizontal stack

<Stack flexDirection="row">
  <Button variant="tertiary">Avbryt</Button>
  <Button variant="primary">Kjøp</Button>
</Stack>

A reverse sideways stack

<Stack flexDirection="row-reverse">
  <Button variant="tertiary">Avbryt</Button>
  <Button variant="primary">Kjøp</Button>
</Stack>