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>

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).

Using Spacer without props inside a flex container pushes content to the edges.

<Row>
  <Icon name="user" />
  <Spacer />
  <Button label="Settings" variant="ghost" />
</Row>

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