> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Spacer

> Creates space between components

# 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

```jsx theme={null}
<Row>
  <Text value="Left" />
  <Spacer />
  <Text value="Right" />
</Row>
```

## Props

<ResponseField name="size" type="string | number">
  Fixed size of the space. Presets: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`. If not provided, it acts as `flex: 1`.
</ResponseField>

<ResponseField name="horizontal" type="boolean">
  Force horizontal spacing (width).
</ResponseField>

<ResponseField name="vertical" type="boolean">
  Force vertical spacing (height).
</ResponseField>

## Examples

### Flex Spacer

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

```jsx theme={null}
<Row>
  <Icon name="user" />
  <Spacer />
  <Button label="Settings" variant="ghost" />
</Row>
```

### Fixed Spacing

```jsx theme={null}
<Col>
  <Text value="Section 1" />
  <Spacer size="xl" />
  <Text value="Section 2" />
</Col>
```