Inline

On this page

Watch

UTC 12:04:31

Depth

4.2 m

Speed

6.2 kn

The primitives composed: every value a token's name, never a raw color or distance.

Code

import { Box } from "@bosunkit/components/box";
import { Stack } from "@bosunkit/components/stack";
import { Inline } from "@bosunkit/components/inline";
import { Text } from "@bosunkit/components/text";
import { Heading } from "@bosunkit/components/heading";
import type { ReactElement } from "react";

export const description: string =
  "The primitives composed: a stack of two cards, a heading and a reading, all from tokens.";

export default function Example(): ReactElement {
  return (
    <Stack space="md">
      <Heading level={2}>Watch</Heading>
      <Inline space="sm">
        <Text family="mono" size="sm" color="text-dim">UTC 12:04:31</Text>
      </Inline>
      <Inline space="md">
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Depth</Text>
            <Text size="lg">4.2 m</Text>
          </Stack>
        </Box>
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Speed</Text>
            <Text size="lg">6.2 kn</Text>
          </Stack>
        </Box>
      </Inline>
    </Stack>
  );
}

Inline is one of the layout primitives the pages are built from. Its props take the scales by name — a spacing prop a step of the spacing scale, a color prop a semantic token — and each becomes a class or a custom property on the element, never a stylesheet. Every primitive takes as, the element to render, and testId.

Watch

UTC 12:04:31

Depth

4.2 m

Speed

6.2 kn

The primitives composed: a stack of two cards, a heading and a reading, all from tokens.

Code

import { Box } from "@bosunkit/components/box";
import { Stack } from "@bosunkit/components/stack";
import { Inline } from "@bosunkit/components/inline";
import { Text } from "@bosunkit/components/text";
import { Heading } from "@bosunkit/components/heading";
import type { ReactElement } from "react";

export const description: string =
  "The primitives composed: a stack of two cards, a heading and a reading, all from tokens.";

export default function Example(): ReactElement {
  return (
    <Stack space="md">
      <Heading level={2}>Watch</Heading>
      <Inline space="sm">
        <Text family="mono" size="sm" color="text-dim">UTC 12:04:31</Text>
      </Inline>
      <Inline space="md">
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Depth</Text>
            <Text size="lg">4.2 m</Text>
          </Stack>
        </Box>
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Speed</Text>
            <Text size="lg">6.2 kn</Text>
          </Stack>
        </Box>
      </Inline>
    </Stack>
  );
}

Inline places siblings on one horizontal row. It does not wrap. Use it for a compact value and unit, an icon and label, or a short action pair that fits its region. Choose a wrapping flex or grid composition for long labels, metadata or actions that need multiple rows; do not shrink text and targets until the row fits.

The gap belongs to Inline and the inset belongs to its parent. Preserve source order when actions have a logical sequence. Icons remain decorative when a neighboring label already names them, and the layout itself does not give plain text button or link behavior.

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	–	The children, laid out left to right.
space	SpaceScale \| undefined	"md"	The gap between the children, a step of the spacing scale by name; `md` unless set.
wrap	boolean \| undefined	false	Whether the children go onto more lines where the row is too narrow for them; on one line unless set.
as	PrimitiveElement \| undefined	"div"	The element to render; `div` unless set.
className	string \| undefined	–	Classes added to the element's own.
testId	string \| undefined	–	Becomes `data-testid` on the element.