Components

Inline

Lays children out horizontally, wraps them to a new row when space runs out 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

Inline lays children out from left to right. The default gap is sm (6 px), the vertical alignment is center and wrapping is on.

import { Button, Inline } from '@bigbang/ui';

export default function Default() {
  return (
    <Inline>
      <Button>Primary button</Button>
      <Button variant="secondary">Secondary button</Button>
      <Button variant="secondary">Tertiary button</Button>
    </Inline>
  );
}

Alignment

align sets placement on the cross axis: start, center, end and baseline. Use baseline to sit text of different sizes on one baseline.

Card titleSample text

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

export default function Align() {
  return (
    <Inline gap="3xl" align="start">
      <Inline align="baseline">
        <Text size="lg">Card title</Text>
        <Text size="sm">Sample text</Text>
      </Inline>
      <Inline align="center">
        <Text size="lg">Card title</Text>
        <Text size="sm">Sample text</Text>
      </Inline>
    </Inline>
  );
}

Distribution

justify sets distribution on the main axis: start, center, end and between. between pushes the first child to the start and the last to the end.

First itemSecond item

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

export default function Justify() {
  return (
    <Inline justify="between">
      <Text>First item</Text>
      <Text>Second item</Text>
    </Inline>
  );
}

Wrapping

wrap is on by default: when the row is full, children drop to the next row and the same gap is used between rows. wrap={false} keeps children on one row; on a narrow space they can overflow.

import { Button, Inline } from '@bigbang/ui';

export default function Wrap() {
  return (
    <div style={{ maxWidth: '16rem' }}>
      <Inline>
        <Button>Primary button</Button>
        <Button variant="secondary">Secondary button</Button>
        <Button variant="secondary">Tertiary button</Button>
      </Inline>
    </div>
  );
}

As a list

With render={<ul />} Inline becomes a <ul>; write the children as <li>. It suits groups of tags or links.

First item
Second item
Third item

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

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

Light and dark mode

Inline carries no colour; the colours of the children come from their own components and change by themselves in light and dark mode.

import { Button, Inline } from '@bigbang/ui';

export default function Default() {
  return (
    <Inline>
      <Button>Primary button</Button>
      <Button variant="secondary">Secondary button</Button>
      <Button variant="secondary">Tertiary button</Button>
    </Inline>
  );
}