# Spacer

> Adds a fixed gap from the scale, or flexes to push siblings apart.

Category: Layout · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/spacer

Spacer is an escape hatch for the rare case where a gap belongs to one spot rather than to a whole group. In a flex row it grows to fill the remaining space, which pushes later items to the far edge. Prefer the `gap` prop of Stack and Inline wherever you can.

## Import

```tsx
import { Spacer } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Flexible

```tsx
import { Button, Spacer, Text } from '@bindshq/stance-react';

export function Flexible() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
      <Text size="sm" weight="semibold">
        Signature templates
      </Text>
      <Spacer />
      <Button size="sm">New template</Button>
    </div>
  );
}
```

### Fixed size

```tsx
import { Spacer, Text } from '@bindshq/stance-react';

export function Fixed() {
  return (
    <div>
      <Text size="sm">Contract sent to legal@acme.com</Text>
      <Spacer size={6} />
      <Text size="sm" tone="muted">
        You’ll be notified when all parties have signed.
      </Text>
    </div>
  );
}
```

### Horizontal

```tsx
import { Button, Spacer } from '@bindshq/stance-react';

export function Horizontal() {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Button variant="outline" size="sm">
        Back
      </Button>
      <Spacer size={4} axis="horizontal" />
      <Button size="sm">Next</Button>
    </div>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Spacer | `size` | `SpaceKey` | None | Fixed size. Omit to flex. |
| Spacer | `axis` | `'vertical' \| 'horizontal'` | `'vertical'` | Axis of a fixed spacer. |

## Accessibility

- Spacer is aria-hidden and never focusable.

## Guidelines

**Do**

- Use a flexible spacer to push a trailing action to the end of a toolbar.

**Don’t**

- Chain spacers to build layouts; use Stack gap.

## Related

- https://stanceui.com/components/stack
- https://stanceui.com/components/inline