Fundamentos

Separator

Una línea de 1px, horizontal o vertical, que agrupa sin decir nada.

import { Separator } from "sebs7n-ui/separator"

Ejemplos

Horizontal y vertical

Facturación

Plan Pro

Mensual

ARS

import { Separator } from "sebs7n-ui/separator"

function Basico() {
  return (
    <div className="w-full max-w-sm">
      <div className="text-copy-14 text-gray-1000">Facturación</div>
      <Separator className="my-3" />
      <div className="flex h-5 items-center gap-3 text-copy-13 text-gray-900">
        <span>Plan Pro</span>
        <Separator orientation="vertical" />
        <span>Mensual</span>
        <Separator orientation="vertical" />
        <span>ARS</span>
      </div>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Separator

Hereda las props de Separator.

Prop	Tipo	Por defecto	Descripción
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the separator.
`className`	`string`	—

Teclado

—: No es interactivo.

Accesibilidad

Por defecto Base UI lo emite con role="separator" y su orientación.
Si solo separa visualmente y ya hay una estructura semántica alrededor (<ul>, <section>), conviene aria-hidden.

Reglas de uso

Vertical dentro de un flex necesita alto: className="h-4".
Entre ítems de un menú va DropdownMenuSeparator, no este.

Relacionados

DropdownMenu Card