Space

Define espaçamento consistente entre componentes.

Importação

import { Space } from 'asterui'

Exemplos

Espaço Horizontal

Espaçamento horizontal padrão entre elementos.

</>

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

Espaço Vertical

Espaçamento vertical entre elementos.

</>

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

Diferentes Tamanhos

Controle o tamanho do espaçamento com a prop size.

</>

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

Com Alinhamento

Alinhe itens dentro do espaço.

</>

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

Quebra de Itens

Permita que itens quebrem para a próxima linha.

</>

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

Espaços Aninhados

Combine espaçamento vertical e horizontal.

</>

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

Justificar Conteúdo

Controle como os itens são distribuídos ao longo do eixo principal.

</>

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

Separador de Divisão

Insira um elemento separador entre os filhos.

</>

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

Propriedade	Descrição	Tipo	Padrão
direction	Direção do layout	'horizontal' | 'vertical'	'horizontal'
size	Tamanho do espaçamento entre filhos	'xs' | 'sm' | 'md' | 'lg' | 'xl' | number	'sm'
align	Alinhamento dos itens	'start' | 'end' | 'center' | 'baseline' | 'stretch'	-
justify	Justificação dos itens ao longo do eixo principal	'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'	-
wrap	Se deve quebrar itens	boolean	false
split	Elemento separador entre filhos	React.ReactNode	-
className	Classes CSS adicionais	string	-

Acessibilidade

• Space é um utilitário de layout sem requisitos específicos de acessibilidade
• Mantém a estrutura semântica dos elementos filhos
• Size mapeia para espaçamento Tailwind: xs=1, sm=2, md=4, lg=6, xl=8