Components

Stack

Lays children out vertically and sets the space between them with a token.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Stack lays children out from top to bottom. The default gap is md (8 px) and the alignment is stretch: children fill the full width.

First item

Second item

Third item

import { Box, Stack, Text } from '@bigbang/ui';

export default function Default() {
  return (
    <Stack>
      <Box padding="md" border="subtle" radius="sm">
        <Text>First item</Text>
      </Box>
      <Box padding="md" border="subtle" radius="sm">
        <Text>Second item</Text>
      </Box>
      <Box padding="md" border="subtle" radius="sm">
        <Text>Third item</Text>
      </Box>
    </Stack>
  );
}

Gap

gap takes a value from the space scale: none to 7xl. Use one gap inside a group; for a larger gap between unrelated groups, wrap them in another Stack.

First item

Second item

Third item

First item

Second item

Third item

import { Box, Inline, Stack, Text } from '@bigbang/ui';

export default function Gap() {
  return (
    <Inline gap="3xl" align="start">
      <Stack gap="xs">
        <Box padding="md" border="subtle" radius="sm">
          <Text>First item</Text>
        </Box>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Second item</Text>
        </Box>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Third item</Text>
        </Box>
      </Stack>
      <Stack gap="xl">
        <Box padding="md" border="subtle" radius="sm">
          <Text>First item</Text>
        </Box>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Second item</Text>
        </Box>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Third item</Text>
        </Box>
      </Stack>
    </Inline>
  );
}

Alignment

align sets placement on the cross axis: start, center, end and stretch. With any value except stretch, children keep their own content width.

First item

Second item

First item

Second item

First item

Second item

import { Box, Inline, Stack, Text } from '@bigbang/ui';

export default function Align() {
  return (
    <Inline gap="3xl" align="start">
      <Stack align="start">
        <Box padding="md" border="subtle" radius="sm">
          <Text>First item</Text>
        </Box>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Second item</Text>
        </Box>
      </Stack>
      <Stack align="center">
        <Box padding="md" border="subtle" radius="sm">
          <Text>First item</Text>
        </Box>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Second item</Text>
        </Box>
      </Stack>
      <Stack align="end">
        <Box padding="md" border="subtle" radius="sm">
          <Text>First item</Text>
        </Box>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Second item</Text>
        </Box>
      </Stack>
    </Inline>
  );
}

Separator

separator draws a 1 px subtle rule between children. There is no rule above the first child or below the last; gap is split on both sides of the rule.

First itemSecond itemThird item

import { Stack, Text } from '@bigbang/ui';

export default function Separator() {
  return (
    <Stack separator gap="md">
      <Text>First item</Text>
      <Text>Second item</Text>
      <Text>Third item</Text>
    </Stack>
  );
}

As a list

With render={<ul />} Stack becomes a <ul>; write the children as <li>. A screen reader then announces the number of items.

First item
Second item
Third item

import { Stack, Text } from '@bigbang/ui';

export default function AsList() {
  return (
    <Stack render={<ul aria-label="Item list" />} gap="sm">
      <li>
        <Text>First item</Text>
      </li>
      <li>
        <Text>Second item</Text>
      </li>
      <li>
        <Text>Third item</Text>
      </li>
    </Stack>
  );
}

Light and dark mode

Stack carries no colour; only the separator rule comes from the color-border-subtle token, and it changes by itself in light and dark mode.

First item

Second item

Third item

First item

Second item

Third item

import { Box, Stack, Text } from '@bigbang/ui';

export default function Default() {
  return (
    <Stack>
      <Box padding="md" border="subtle" radius="sm">
        <Text>First item</Text>
      </Box>
      <Box padding="md" border="subtle" radius="sm">
        <Text>Second item</Text>
      </Box>
      <Box padding="md" border="subtle" radius="sm">
        <Text>Third item</Text>
      </Box>
    </Stack>
  );
}