Divider

Separador visual para seções de conteúdo com rótulos de texto opcionais.

Importação

import { Divider } from 'asterui'

Exemplos

Divider Básico

Divisor horizontal simples.

</>

Content above the divider

Content below the divider

import { Divider } from 'asterui'

function App() {
  return (
      <div>
        <p>Content above the divider</p>
        <Divider />
        <p>Content below the divider</p>
      </div>
    )
}

export default App

Com Texto

Divisor com rótulo de texto.

</>

Section 1 content

OR

Section 2 content

import { Divider } from 'asterui'

function App() {
  return (
      <div>
        <p>Section 1 content</p>
        <Divider>OR</Divider>
        <p>Section 2 content</p>
      </div>
    )
}

export default App

Posição do Texto

Posicione o texto no início, centro ou fim.

</>

Start

Center

End

import { Divider, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md" className="w-full">
        <Divider position="start">Start</Divider>
        <Divider position="center">Center</Divider>
        <Divider position="end">End</Divider>
      </Space>
    )
}

export default App

Divider Vertical

Divisor vertical para conteúdo inline.

</>

Home

Products

About

import { Divider } from 'asterui'

function App() {
  return (
      <div className="flex items-center h-8">
        <span>Home</span>
        <Divider orientation="vertical" />
        <span>Products</span>
        <Divider orientation="vertical" />
        <span>About</span>
      </div>
    )
}

export default App

Cores

Divisores com diferentes tipos de cor.

</>

Primary

Secondary

Accent

import { Divider, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md" className="w-full">
        <Divider type="primary">Primary</Divider>
        <Divider type="secondary">Secondary</Divider>
        <Divider type="accent">Accent</Divider>
      </Space>
    )
}

export default App

API

Divider

Propriedade	Descrição	Tipo	Padrão
children	Texto ou conteúdo no divisor	React.ReactNode	-
orientation	Orientação do divisor	'horizontal' | 'vertical'	'horizontal'
position	Posição do texto	'start' | 'center' | 'end'	'center'
type	Tipo de cor	'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'	-
className	Classes CSS adicionais	string	-