72Começar
HextaUI

Separator

Uma linha fina que divide o conteúdo na horizontal ou na vertical, com rótulo opcional e um modo decorativo para linhas puramente visuais.

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>
  )
}

Instalação

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

Adiciona o componente, os tokens de tema do HextaUI e quaisquer componentes do HextaUI dos quais ele depende.

Uso

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

A linha tem um pixel físico de espessura em qualquer tela, a mesma linha fina das bordas, então se alinha com os cards e inputs ao redor. Espace-a com o gap do pai ou uma margem.

Exemplos

Vertical

Com orientation="vertical" a linha se estica até a altura da sua linha flex. Fora de uma linha flex, dê a ela uma 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

Os filhos ficam no meio da linha, com a linha preenchendo o espaço dos dois 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>
  )
}

Alinhamento

align move o rótulo para o start ou o end, o que combina com cabeçalhos de seção e de data. Os ícones são dimensionados ao 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>
  )
}

Rótulo vertical

Um separador vertical com rótulo mantém o texto na vertical e desenha a linha acima e abaixo dele.

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 dos leitores de tela uma linha puramente visual, para não anunciarem um separador entre linhas que já se leem bem sozinhas.

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>
  )
}

Inline

Use render para gerar um <span> onde um <div> não é permitido, como dentro de um parágrafo.

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>
  )
}

Conteúdo longo

Rótulos longos quebram linha e strings sem quebras são quebradas, enquanto um trecho curto de linha continua visível em 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>
  )
}

Da direita para a esquerda

Início e fim seguem a direção de leitura.

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>
  )
}

Acessibilidade

  • Um separador simples tem role="separator" e aria-orientation, como um <hr>.
  • Com decorative, recebe role="none" e os leitores de tela o ignoram.
  • Um separador com rótulo não tem role. O role separator tornaria seu texto apresentacional, então o rótulo é lido como texto comum.

Referência da API

Construído sobre o Separator do Base UI. Renderiza um <div> e aceita seus atributos.

Separator

PropTipoPadrão
orientation
"horizontal" | "vertical""horizontal"
decorativeOculta a linha dos leitores de tela quando é apenas visual.
booleanfalse
childrenUm rótulo desenhado na linha. Omita para uma linha simples.
ReactNode–
alignOnde o rótulo fica ao longo da linha.
"start" | "center" | "end""center"
className
string | (state) => string–
render
ReactElement | (props, state) => ReactElement<div>
AtributoDescrição
data-slot="separator"Seleciona os separadores no CSS.
data-orientation"horizontal" ou "vertical".
data-contentPresente quando o separador tem um rótulo.
data-alignO alinhamento do rótulo, quando há um rótulo.
data-slot="separator-label"O elemento que envolve o rótulo.

Relacionados