Skip to main content

Spacer

The Spacer component creates empty space between elements. It can define a specific size or act as a flexible spring to push components apart.

Usage

<Row>
  <Text value="Left" />
  <Spacer />
  <Text value="Right" />
</Row>

Props

size
string | number
Fixed size of the space. Presets: xs, sm, md, lg, xl, 2xl. If not provided, it acts as flex: 1.
horizontal
boolean
Force horizontal spacing (width).
vertical
boolean
Force vertical spacing (height).

Examples

Flex Spacer

Using Spacer without props inside a flex container pushes content to the edges.
<Row>
  <Icon name="user" />
  <Spacer />
  <Button label="Settings" variant="ghost" />
</Row>

Fixed Spacing

<Col>
  <Text value="Section 1" />
  <Spacer size="xl" />
  <Text value="Section 2" />
</Col>