Space

The Space component from Superset's UI library.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

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

Result

Loading...

Vertical Space

Live Editor

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

Result

Loading...

Space Sizes

Live Editor

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

Result

Loading...

Props

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

Import

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

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.