Space

Set consistent spacing between components.

Import

import { Space } from 'asterui'

Examples

Horizontal Space

Default horizontal spacing between elements.

</>

Button 1Button 2Button 3

import { Space, Button } from 'asterui'

function App() {
  return (
      <Space>
        <Button color="primary">Button 1</Button>
        <Button color="secondary">Button 2</Button>
        <Button color="accent">Button 3</Button>
      </Space>
    )
}

export default App

Vertical Space

Vertical spacing between elements.

</>

Button 1Button 2Button 3

import { Space, Button } from 'asterui'

function App() {
  return (
      <Space direction="vertical">
        <Button color="primary">Button 1</Button>
        <Button color="secondary">Button 2</Button>
        <Button color="accent">Button 3</Button>
      </Space>
    )
}

export default App

Different Sizes

Control spacing size with the size prop.

</>

Extra Small

Spacing

Small

Spacing

Medium

Spacing

Large

Spacing

Extra Large

Spacing

import { Space, Badge } from 'asterui'

function App() {
  return (
      <Space direction="vertical">
        <Space size="xs">
          <Badge>Extra Small</Badge>
          <Badge>Spacing</Badge>
        </Space>
  
        <Space size="sm">
          <Badge>Small</Badge>
          <Badge>Spacing</Badge>
        </Space>
  
        <Space size="md">
          <Badge>Medium</Badge>
          <Badge>Spacing</Badge>
        </Space>
  
        <Space size="lg">
          <Badge>Large</Badge>
          <Badge>Spacing</Badge>
        </Space>
  
        <Space size="xl">
          <Badge>Extra Large</Badge>
          <Badge>Spacing</Badge>
        </Space>
      </Space>
    )
}

export default App

With Alignment

Align items within the space.

</>

SmallMediumLarge

import { Space, Button } from 'asterui'

function App() {
  return (
      <Space align="center">
        <Button color="primary" size="xs">
          Small
        </Button>
        <Button color="secondary" size="md">
          Medium
        </Button>
        <Button color="accent" size="lg">
          Large
        </Button>
      </Space>
    )
}

export default App

Wrap Items

Allow items to wrap to the next line.

</>

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Tag 6

Tag 7

Tag 8

import { Space, Badge } from 'asterui'

function App() {
  return (
      <Space wrap>
        <Badge>Tag 1</Badge>
        <Badge>Tag 2</Badge>
        <Badge>Tag 3</Badge>
        <Badge>Tag 4</Badge>
        <Badge>Tag 5</Badge>
        <Badge>Tag 6</Badge>
        <Badge>Tag 7</Badge>
        <Badge>Tag 8</Badge>
      </Space>
    )
}

export default App

Nested Spaces

Combine vertical and horizontal spacing.

</>

Card 1

Action 1Action 2

Card 2

Action 1Action 2

import { Space, Card, Button } from 'asterui'

function App() {
  return (
      <Space direction="vertical">
        <Card title="Card 1">
          <Space>
            <Button color="primary" size="sm">
              Action 1
            </Button>
            <Button color="secondary" size="sm">
              Action 2
            </Button>
          </Space>
        </Card>
  
        <Card title="Card 2">
          <Space>
            <Button color="primary" size="sm">
              Action 1
            </Button>
            <Button color="secondary" size="sm">
              Action 2
            </Button>
          </Space>
        </Card>
      </Space>
    )
}

export default App

Justify Content

Control how items are distributed along the main axis.

</>

Cancel

Save DraftSubmit

import { Space, Button } from 'asterui'

function App() {
  return (
      <Space justify="between" className="w-full">
        <Button variant="ghost">Cancel</Button>
        <Space>
          <Button color="secondary">Save Draft</Button>
          <Button color="primary">Submit</Button>
        </Space>
      </Space>
    )
}

export default App

Split Separator

Insert a separator element between children.

</>

Home

Products

About

Contact

import { Space, Divider } from 'asterui'

function App() {
  return (
      <Space split={<Divider type="vertical" />}>
        <a href="#">Home</a>
        <a href="#">Products</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </Space>
    )
}

export default App

API

Property	Description	Type	Default
direction	Layout direction	'horizontal' | 'vertical'	'horizontal'
size	Spacing size between children	'xs' | 'sm' | 'md' | 'lg' | 'xl' | number	'sm'
align	Alignment of items	'start' | 'end' | 'center' | 'baseline' | 'stretch'	-
justify	Justification of items along main axis	'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'	-
wrap	Whether to wrap items	boolean	false
split	Separator element between children	React.ReactNode	-
className	Additional CSS classes	string	-

Accessibility

• Space is a layout utility with no specific accessibility requirements
• Maintains semantic structure of child elements
• Size maps to Tailwind spacing: xs=1, sm=2, md=4, lg=6, xl=8