72Empezar
HextaUI

Separator

Una línea fina que divide el contenido horizontal o verticalmente, con una etiqueta opcional y un modo decorativo para líneas puramente visuales.

HextaUI

Components that feel great to use and to write.

DocsComponentsSource
import { Separator } from "@/components/ui/separator"

export function SeparatorDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 text-sm">
      <div className="flex flex-col gap-1">
        <h4 className="font-medium">HextaUI</h4>
        <p className="text-muted-foreground">
          Components that feel great to use and to write.
        </p>
      </div>
      <Separator />
      <div className="flex h-5 items-center gap-4">
        <a href="#">Docs</a>
        <Separator orientation="vertical" />
        <a href="#">Components</a>
        <Separator orientation="vertical" />
        <a href="#">Source</a>
      </div>
    </div>
  )
}

Instalación

pnpm dlx shadcn@latest add https://hextaui.com/r/separator.json

Añade el componente, los tokens del tema de HextaUI y los componentes de HextaUI de los que depende.

Uso

import { Separator } from "@/components/ui/separator"
<Separator />
<Separator orientation="vertical" />
<Separator>Or continue with</Separator>

La línea tiene un píxel físico de grosor en todas las pantallas, la misma línea fina que los bordes, así que se alinea con las tarjetas e inputs que la rodean. Sepárala con el gap del padre o un margen.

Ejemplos

Vertical

Con orientation="vertical" la línea se estira a la altura de su fila flex. Fuera de una fila flex, dale una altura.

import { Separator } from "@/components/ui/separator"

export function SeparatorVertical() {
  return (
    <div className="flex items-center gap-4 text-sm">
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">2,481</span>
        <span className="text-muted-foreground">Stars</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">164</span>
        <span className="text-muted-foreground">Forks</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">38</span>
        <span className="text-muted-foreground">Contributors</span>
      </div>
    </div>
  )
}

Label

Los hijos se sitúan en el centro de la línea, y la línea llena el espacio a ambos lados.

import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"

export function SeparatorLabel() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Button>Continue with email</Button>
      <Separator>Or continue with</Separator>
      <div className="grid grid-cols-2 gap-2">
        <Button variant="outline">GitHub</Button>
        <Button variant="outline">Google</Button>
      </div>
    </div>
  )
}

Alineación

align mueve la etiqueta al start o al end, lo que encaja con encabezados de sección y de fecha. Los iconos se dimensionan según el texto.

import { IconCalendar } from "@tabler/icons-react"

import { Separator } from "@/components/ui/separator"

export function SeparatorAlign() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Separator align="start">
        <IconCalendar aria-hidden="true" />
        Today
      </Separator>
      <Separator>Yesterday</Separator>
      <Separator align="end">Last week</Separator>
    </div>
  )
}

Etiqueta vertical

Un separador vertical con etiqueta mantiene el texto en vertical y dibuja la línea encima y debajo.

import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"

export function SeparatorVerticalLabel() {
  return (
    <div className="flex items-stretch gap-4">
      <div className="flex w-32 flex-col gap-2">
        <Button variant="outline">Upload file</Button>
        <Button variant="outline">Browse library</Button>
      </div>
      <Separator orientation="vertical">or</Separator>
      <div className="flex w-32 items-center justify-center rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
        Drop a file here
      </div>
    </div>
  )
}

Decorativo

decorative oculta a los lectores de pantalla una línea puramente visual, para que no anuncien un separador entre filas que ya se leen bien por sí solas.

import { Separator } from "@/components/ui/separator"

export function SeparatorDecorative() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-3 rounded-xl border p-4 text-sm">
      <div className="flex items-center justify-between">
        <span className="text-muted-foreground">Subtotal</span>
        <span className="tabular-nums">$48.00</span>
      </div>
      <div className="flex items-center justify-between">
        <span className="text-muted-foreground">Shipping</span>
        <span className="tabular-nums">$4.00</span>
      </div>
      <Separator decorative />
      <div className="flex items-center justify-between font-medium">
        <span>Total</span>
        <span className="tabular-nums">$52.00</span>
      </div>
    </div>
  )
}

En línea

Usa render para producir un <span> donde no se permite un <div>, como dentro de un párrafo.

import { Separator } from "@/components/ui/separator"

export function SeparatorRender() {
  return (
    <p className="text-sm text-muted-foreground">
      <span className="inline-flex h-4 items-center gap-2 align-middle">
        <span>Ada Park</span>
        <Separator orientation="vertical" decorative render={<span />} />
        <time dateTime="2026-10-05">Oct 5, 2026</time>
        <Separator orientation="vertical" decorative render={<span />} />
        <span>4 min read</span>
      </span>
    </p>
  )
}

Contenido largo

Las etiquetas largas se ajustan y las cadenas sin espacios se cortan, mientras un tramo corto de línea permanece visible a cada lado.

import { Separator } from "@/components/ui/separator"

export function SeparatorLongContent() {
  return (
    <div className="flex w-full max-w-72 flex-col gap-6">
      <Separator>
        Messages before you joined the channel are kept for ninety days
      </Separator>
      <Separator align="start">
        https://hextaui.com/docs/components/separator/very-long-anchor
      </Separator>
    </div>
  )
}

De derecha a izquierda

Start y end siguen la dirección de lectura.

import { Separator } from "@/components/ui/separator"

export function SeparatorRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-6 text-sm">
      <Separator align="start">اليوم</Separator>
      <div className="flex h-5 items-center gap-4">
        <a href="#">الوثائق</a>
        <Separator orientation="vertical" />
        <a href="#">المكونات</a>
        <Separator orientation="vertical" />
        <a href="#">المصدر</a>
      </div>
    </div>
  )
}

Accesibilidad

  • Un separador simple tiene role="separator" y aria-orientation, como un <hr>.
  • Con decorative, recibe role="none" y los lectores de pantalla lo omiten.
  • Un separador con etiqueta no tiene rol. El rol separator volvería presentacional su texto, así que la etiqueta se lee como texto normal.

Referencia de la API

Construido sobre el Separator de Base UI. Renderiza un <div> y acepta sus atributos.

Separator

PropTipoPredeterminado
orientation
"horizontal" | "vertical""horizontal"
decorativeOculta la línea a los lectores de pantalla cuando es solo visual.
booleanfalse
childrenUna etiqueta dibujada en la línea. Omítela para una línea simple.
ReactNode–
alignDónde se sitúa la etiqueta a lo largo de la línea.
"start" | "center" | "end""center"
className
string | (state) => string–
render
ReactElement | (props, state) => ReactElement<div>
AtributoDescripción
data-slot="separator"Selecciona los separadores en CSS.
data-orientation"horizontal" o "vertical".
data-contentPresente cuando el separador tiene una etiqueta.
data-alignLa alineación de la etiqueta, cuando hay una.
data-slot="separator-label"El elemento que envuelve la etiqueta.

Relacionado