Spacer

Spacer eats the leftover main-axis space inside a flex container. It does nothing else. Reach for it when you need to push siblings to opposite edges of a row or column.

What it is

A <Box flex={1}>. Spacer accepts every Box prop, so you can override flex if you ever need a spacer with a fractional weight. The named primitive exists because <Spacer /> at the call site reads more clearly than <Box flex={1} />.

Install

Spacer is exported from usemotif. No separate install.

import { Spacer } from 'usemotif';

API

function Spacer(props: SpacerProps): JSX.Element

Examples

Toolbar with actions pushed to the right:

<HStack alignItems="center">
<Logo />
<Spacer />
<Button>Sign in</Button>
</HStack>

Equal-width slots — give each Spacer the same flex weight:

<HStack>
<Spacer />
<Button>One</Button>
<Spacer />
<Button>Two</Button>
<Spacer />
</HStack>