For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/space.md.
Leaf UI
  • English

      • 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="ghost">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

      PropertyTypeDefaultDescription
      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
      wrapbooleanfalseWrap as needed
      splitReactNode—Separator between elements