Space

Set components spacing.

When To Use#

Avoid components clinging together and set a unified space.

Examples

Space

Basic Usage

Crowded components horizontal spacing.

TypeScript
JavaScript
import { UploadOutlined } from 'infra-design-icons';
import { Button, Popconfirm, Space, Upload } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <Space>
    Space
    <Button type="primary">Button</Button>
    <Upload>
      <Button>
        <UploadOutlined /> Click to Upload
      </Button>
    </Upload>
    <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
      <Button>Confirm</Button>
    </Popconfirm>
  </Space>
);

export default App;

Card

Card content

Card

Card content

Card

Card content

Vertical Space

Crowded components vertical spacing.

TypeScript
JavaScript
import { Card, Space } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
    <Card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </Card>
    <Card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </Card>
    <Card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </Space>
);

export default App;

SmallMiddleLarge

Space Size

large, middle and small preset sizes.

Set the size to large and middle by setting size to large and middle respectively. If size is not set, the spacing is small.

TypeScript
JavaScript
import { Button, Radio, Space } from 'infrad';
import type { SpaceSize } from 'infrad/es/space';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [size, setSize] = useState<SpaceSize | [SpaceSize, SpaceSize]>('small');

  return (
    <>
      <Radio.Group value={size} onChange={e => setSize(e.target.value)}>
        <Radio value="small">Small</Radio>
        <Radio value="middle">Middle</Radio>
        <Radio value="large">Large</Radio>
      </Radio.Group>
      <br />
      <br />
      <Space size={size}>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="link">Link</Button>
      </Space>
    </>
  );
};

export default App;

center

Block

start

Block

end

Block

baseline

Block

Align

Config item align.

TypeScript
JavaScript
import { Button, Space } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <div className="space-align-container">
    <div className="space-align-block">
      <Space align="center">
        center
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
    <div className="space-align-block">
      <Space align="start">
        start
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
    <div className="space-align-block">
      <Space align="end">
        end
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
    <div className="space-align-block">
      <Space align="baseline">
        baseline
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
  </div>
);

export default App;
.space-align-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.space-align-block {
  flex: none;
  margin: 8px 4px;
  padding: 4px;
  border: 1px solid #40a9ff;
}
.space-align-block .mock-block {
  display: inline-block;
  padding: 32px 8px 16px;
  background: rgba(150, 150, 150, 0.2);
}

Customize Size

Custom spacing size.

TypeScript
JavaScript
import { Button, Slider, Space } from 'infrad';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [size, setSize] = useState(8);

  return (
    <>
      <Slider value={size} onChange={value => setSize(value)} />
      <br />
      <br />
      <Space size={size}>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="link">Link</Button>
      </Space>
    </>
  );
};

export default App;

Wrap

Auto wrap line.

TypeScript
JavaScript
import { Button, Space } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <Space size={[8, 16]} wrap>
    {new Array(20).fill(null).map((_, index) => (
      // eslint-disable-next-line react/no-array-index-key
      <Button key={index}>Button</Button>
    ))}
  </Space>
);

export default App;

Link

Split

Crowded components split.

TypeScript
JavaScript
import { Divider, Space, Typography } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <Space split={<Divider type="vertical" />}>
    <Typography.Link>Link</Typography.Link>
    <Typography.Link>Link</Typography.Link>
    <Typography.Link>Link</Typography.Link>
  </Space>
);

export default App;

API#

Property	Description	Type	Default	Version
align	Align items	`start` \| `end` \|`center` \|`baseline`	-	4.2.0
direction	The space direction	`vertical` \| `horizontal`	`horizontal`	4.1.0
size	The space size	Size \| Size[]	`small`	4.1.0 \| Array: 4.9.0
split	Set split	ReactNode	-	4.7.0
wrap	Auto wrap line, when `horizontal` effective	boolean	false	4.9.0

Size#

'small' | 'middle' | 'large' | number