Flow elements require space (sometimes referred to as "white space") to physically and conceptually separate them from the elements that come before and after them.

Usage

Gap

The gap property defines how much space there should be between each element in the stack. Available gap sizes are:

none (default)
xsmall
small
medium
large
xlarge
xxlarge

Show Imports

Open in Playroom

<Stack gap="small">
  <Box background="dim" height={32} />
  <Box background="dim" height={32} />
  <Box background="dim" height={32} />
</Stack>

<Stack gap="small">
  <Box background="dim" height={32} />
  <Box background="dim" height={32} />
  <Box background="dim" height={32} />
</Stack>

Align

Align items along the cross-axis of the flex container, stretch is the default option.

Options

Note that stretch will not apply to elements that have a fixed width

stretch

center

start

end

Show Imports

Open in Playroom

const options = [`stretch`, `center`, `start`, `end`];
const [index, setIndex] = useState(1);

return (
  <Stack gap="large">
    <FieldSet legend="Options">
      <FieldDescription>
        Note that stretch will not apply to elements that have a fixed width
      </FieldDescription>
      <SegmentedControl
        onChange={(v) => setIndex(parseInt(v, 10))}
        value={index}
        options={options.map((label, value) => ({ label, value }))}
      />
    </FieldSet>
    <Stack gap="small" align={options[index]}>
      <Box background="dim" height={32} width={32} />
      <Box background="dim" height={32} width={128} />
      <Box background="dim" height={32} width={32} />
    </Stack>
  </Stack>
);

const options = [`stretch`, `center`, `start`, `end`];
const [index, setIndex] = useState(1);
return (
  <Stack gap="large">
    <FieldSet legend="Options">
      <FieldDescription>
        Note that stretch will not apply to elements that have a fixed width
      </FieldDescription>
      <SegmentedControl
        onChange={(v) => setIndex(parseInt(v, 10))}
        value={index}
        options={options.map((label, value) => ({ label, value }))}
      />
    </FieldSet>
    <Stack gap="small" align={options[index]}>
      <Box background="dim" height={32} width={32} />
      <Box background="dim" height={32} width={128} />
      <Box background="dim" height={32} width={32} />
    </Stack>
  </Stack>
);

Orientation

Stacks can also be distributed along the horizontal axis.

Note: items within a horizontally oriented Stack will not wrap. If you need items to wrap, consider using the Cluster layout primitive.

Show Imports

Open in Playroom

<Stack gap="small" orientation="horizontal">
  <Box background="dim" height={32} width={32} />
  <Box background="dim" height={32} width={32} />
  <Box background="dim" height={32} width={32} />
</Stack>

<Stack gap="small" orientation="horizontal">
  <Box background="dim" height={32} width={32} />
  <Box background="dim" height={32} width={32} />
  <Box background="dim" height={32} width={32} />
</Stack>

Dividers

Use the dividers property to separate each element in the stack with a divider, none is the default option.

Show Imports

Open in Playroom

const options = [`none`, `between`, `around`, `start`, `end`];
const [index, setIndex] = useState(1);

return (
  <Stack gap="large">
    <FieldSet legend="Options">
      <SegmentedControl
        onChange={(v) => setIndex(parseInt(v, 10))}
        value={index}
        options={options.map((label, value) => ({ label, value }))}
      />
    </FieldSet>
    <Box height={120}>
      <Stack gap="small" dividers={options[index]}>
        <Text>First item</Text>
        <Text>Second item</Text>
        <Text>Third item</Text>
      </Stack>
    </Box>
  </Stack>
);

const options = [`none`, `between`, `around`, `start`, `end`];
const [index, setIndex] = useState(1);
return (
  <Stack gap="large">
    <FieldSet legend="Options">
      <SegmentedControl
        onChange={(v) => setIndex(parseInt(v, 10))}
        value={index}
        options={options.map((label, value) => ({ label, value }))}
      />
    </FieldSet>
    <Box height={120}>
      <Stack gap="small" dividers={options[index]}>
        <Text>First item</Text>
        <Text>Second item</Text>
        <Text>Third item</Text>
      </Stack>
    </Box>
  </Stack>
);

Nesting

You can nest stacks however you like to achieve the desired layout.

Show Imports

Open in Playroom

<Stack gap="xlarge">
  <Stack gap="xsmall">
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
  </Stack>
  <Stack gap="xsmall">
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
  </Stack>
  <Stack gap="xsmall">
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
  </Stack>
</Stack>

<Stack gap="xlarge">
  <Stack gap="xsmall">
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
  </Stack>
  <Stack gap="xsmall">
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
  </Stack>
  <Stack gap="xsmall">
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
    <Box background="dim" height={32} />
  </Stack>
</Stack>