Spacer

A flex-grow filler — inserts elastic empty space between siblings inside a flex container so you don't have to reach for justify-content.

stable
since v0.1.0
0.42 kB
primitive
layout
flex

Preview

Open

tsx

import { Inline, Spacer, Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Inline gap="3" padding="4" background="bg.subtle" borderRadius="md">
      <Text>Left edge</Text>
      <Spacer />
      <Text>Right edge</Text>
    </Inline>
  );
}

Multiple spacers

Drop more than one Spacer to distribute leftover space evenly between groups. Reads better than justify="space-between" when group counts vary or when the structure is dynamic.

Preview

Open

tsx

import { Box, Inline, Spacer } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Inline gap="3" padding="4" background="bg.subtle" borderRadius="md" align="center">
      <Box padding="2" background="bg.surface" borderRadius="sm">
        Logo
      </Box>
      <Spacer />
      <Box padding="2" background="bg.surface" borderRadius="sm">
        Center
      </Box>
      <Spacer />
      <Box padding="2" background="bg.surface" borderRadius="sm">
        Actions
      </Box>
    </Inline>
  );
}

API

PropTypeDefaultDescription

className

string

—

Additional class names appended after Cynosure's base classes.

style

CSSProperties

—

Inline style overrides merged last.

aria-hidden

boolean

true

Override the implicit `aria-hidden="true"` if Spacer participates in a meaningful layout that assistive tech should observe.

Recipes

Toolbar with logo / nav / actions: <Inline align="center"><Logo /><Spacer /><Nav /><Spacer /><Actions /></Inline>.
Pin a footer to the bottom inside a column flex: <Stack flex="1"><Content /><Spacer /><Footer /></Stack>.
Spacer is for flex layouts only — outside a flex parent it has no effect; use margin or token-sized Box instead.