Space

Space is a small, composable flex layout primitive. It arranges its children horizontally or vertically and exposes the most useful flexbox controls: direction, alignment, justification, wrapping, gaps, sizing, full-width/full-height layouts, semantic tags, and separators.

See the live Space showcase.

Basic usageCopy Anchor Link

<Space gap={12} align="center" justify="space-between">
  <span>Project name</span>
  <Button>Save</Button>
</Space>

Children are rendered in their source order. gap accepts a number in pixels or any CSS length such as 0.75rem, 2vw, or clamp(8px, 2vw, 24px).

Direction and alignmentCopy Anchor Link

direction accepts row, row-reverse, column, and column-reverse. align controls the cross axis and accepts normal, stretch, flex-start, flex-end, center, and baseline. justify controls the main axis and accepts normal, flex-start, flex-end, center, space-between, space-around, space-evenly, and stretch.

<Space direction="column" align="stretch" gap="1rem">
  <Input label="Email" />
  <Input label="Password" />
</Space>

Wrapping and responsive layoutsCopy Anchor Link

Set wrap="wrap" when children should move onto additional rows. Use wrap="wrap-reverse" to reverse the cross-axis line order. fullWidth sets width: 100%; fullHeight sets height: 100%; inline uses inline-flex.

<Space fullWidth wrap="wrap" gap={8} justify="center">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</Space>

For different horizontal and vertical spacing, use rowGap and columnGap. These override the corresponding part of gap.

<Space direction="row-reverse" wrap="wrap-reverse" rowGap={16} columnGap="1rem">
  <Button>First</Button>
  <Button>Second</Button>
  <Button>Third</Button>
</Space>

row-reverse and column-reverse reverse the main-axis order without changing the source order. wrap-reverse reverses the cross-axis direction of wrapped lines.

Separators and semantic elementsCopy Anchor Link

separator inserts the same React content between every pair of children. separatorAriaHidden is true by default because visual separators are usually decorative. Set as to nav, section, ul, ol, or span when another semantic element is more appropriate.

<Space as="nav" aria-label="Breadcrumbs" gap={10} separator={<span>/</span>}>
  <Link href="#home">Home</Link>
  <Link href="#projects">Projects</Link>
  <Link href="#current">Current</Link>
</Space>

Flex sizingCopy Anchor Link

flex, grow, shrink, and basis apply flex sizing to the Space container itself when it is a child of another flex container. basis accepts pixels or a CSS length; flex accepts a complete CSS flex value such as 1 or 1 1 320px.

<Space flex="1 1 320px" basis={320} grow={1}>
  Flexible content
</Space>

For a full-size layout region, combine fullWidth and fullHeight with a parent that has a defined height. Use inline when the flex container should participate in an inline text flow.

<Space fullWidth fullHeight align="center" justify="center">
  <span>Centered in the available region</span>
</Space>

<Space inline gap={8} as="nav" aria-label="Inline navigation">
  <Link href="#home">Home</Link>
  <Link href="#about">About</Link>
</Space>

API ReferenceCopy Anchor Link

All standard HTML attributes for the selected element are also supported, including id, data-*, role, and event handlers.

AccessibilityCopy Anchor Link

Space does not add interactive behavior or change the semantics of its children. Choose as="nav" with an accessible label for navigation groups, and use separatorAriaHidden={false} only when the separator conveys meaningful information.