Space

Keep consistent spacing between elements.

Basic usage

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>
  );
}

More examples

PendingComplete

Leaf UIReact

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>
  );
}

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.

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

#Space

#Basic usage

#More examples

#Usage