Divider

Separador visual para secciones de contenido con etiquetas de texto opcionales.

Importar

import { Divider } from 'asterui'

Ejemplos

Divider Básico

Divisor horizontal simple.

</>

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

Con Texto

Divisor con etiqueta 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

Posición del Texto

Posiciona el texto al inicio, centro o final.

</>

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 contenido en línea.

</>

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

Colores

Divisores con diferentes tipos de color.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
children	Texto o contenido en el divisor	React.ReactNode	-
orientation	Orientación del divisor	'horizontal' | 'vertical'	'horizontal'
position	Posición del texto	'start' | 'center' | 'end'	'center'
type	Tipo de color	'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'	-
className	Clases CSS adicionales	string	-