Skip to content
SynapseSynapse

Spacer

Spacer is a leaf element that grows to fill the free space in a Stack or Inline, pushing whatever sits after it to the far edge. It has no brand and no appearance of its own. It is pure layout, so a label on the left and a badge on the right stay pinned to their ends regardless of the host’s theme. The preview below is the real component from @nimblebrain/synapse/ui, live.

import { Inline, Spacer } from "@nimblebrain/synapse/ui";


<Inline gap={8}>
  <Text weight="semibold">Deal name</Text>
  <Spacer />
  <Badge tone="success">Won</Badge>
</Inline>;

Usage

Section titled “Usage”

Spacer takes no custom props. It is a flex: 1 filler. Drop one between two siblings to split them to opposite ends, which reads more clearly than justify="between" when only one gap should expand.

<Inline gap={8}>
  <Text>Follow-up call</Text>
  <Spacer />
  <Text tone="muted">Due today</Text>
</Inline>

Props

Section titled “Props”

Spacer extends the native HTMLAttributes<HTMLDivElement>, so className, style, id, and every other div attribute pass straight through. It defines no custom props.

Prop Type Default
…rest HTMLAttributes<HTMLDivElement> None
Section titled “Related”
  • Inline: the horizontal container a Spacer divides.
  • Stack: the vertical container a Spacer divides.
  • Divider: a visible rule, where Spacer is invisible.