import { StoryWithControls } from '../../../src/components/StorybookWrapper';

Space

The Space component from Superset's UI library.

Live Example

Try It

Edit the code below to experiment with the component:

tsx

function Demo() {
  return (
    <Space size="small">
      {['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].map(item => (
        <div
          key={item}
          style={{
            padding: '8px 16px',
            background: '#e6f4ff',
            border: '1px solid #91caff',
            borderRadius: 4,
          }}
        >
          {item}
        </div>
      ))}
    </Space>
  );
}

Vertical Space

tsx

function VerticalSpace() {
  return (
    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
      <Button buttonStyle="primary">Primary</Button>
      <Button buttonStyle="secondary">Secondary</Button>
      <Button buttonStyle="dashed">Dashed</Button>
    </Space>
  );
}

Space Sizes

tsx

function SpaceSizes() {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  const itemStyle = {
    padding: '8px 16px',
    background: '#e6f4ff',
    border: '1px solid #91caff',
    borderRadius: 4,
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {['small', 'middle', 'large'].map(size => (
        <div key={size}>
          <h4>{size}</h4>
          <Space size={size}>
            {items.map(item => (
              <div key={item} style={itemStyle}>{item}</div>
            ))}
          </Space>
        </div>
      ))}
    </div>
  );
}

Props

Prop	Type	Default	Description
`direction`	`string`	`"horizontal"`	-
`size`	`string`	`"small"`	-
`wrap`	`boolean`	`false`	-

Import

tsx

import { Space } from '@superset/components';

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::