> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/space.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Space

Keep consistent spacing between elements.

## Basic usage


SaveCancelMore

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/space/basic.tsx"
import { Button, Space } from '@ifhover/leaf-ui';

export function SpaceBasic() {
  return (
    <Space size="md" wrap>
      <Button>Save</Button>
      <Button variant="outline">Cancel</Button>
      <Button variant="soft">More</Button>
    </Space>
  );
}
```

Expand code

## More examples


PendingComplete

Leaf UI·React

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/space/advanced.tsx"
import { Space, Tag } from '@ifhover/leaf-ui';

export function SpaceVertical() {
  return (
    <Space direction="vertical" size={12} align="start">
      <Tag>Pending</Tag>
      <Tag color="success">Complete</Tag>
      <Space split={<span>·</span>} size={8}>
        <span>Leaf UI</span>
        <span>React</span>
      </Space>
    </Space>
  );
}
```

Expand code

## Usage

Set size to a preset, pixel value or \[vertical, horizontal] gap. Enable wrap for wrapping, and use split to insert separators between items.

## Types

Import these types for data, callbacks and refs.

```ts
import type { SpaceProps } from '@ifhover/leaf-ui';
```

## SpaceProps API

| Property    | Type                                                          | Default        | Description                  |
| ----------- | ------------------------------------------------------------- | -------------- | ---------------------------- |
| `direction` | `'horizontal' \| 'vertical'`                                  | `'horizontal'` | Layout or movement direction |
| `size`      | `'sm' \| 'md' \| 'lg' \| number \| readonly [number, number]` | `'md'`         | Size or spacing preset       |
| `align`     | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`     | `'center'`     | Alignment                    |
| `wrap`      | `boolean`                                                     | `false`        | Wrap as needed               |
| `split`     | `ReactNode`                                                   | —              | Separator between elements   |