72Commencer
HextaUI

Separator

Un trait fin qui sépare le contenu horizontalement ou verticalement, avec un libellé facultatif et un mode décoratif pour les lignes purement visuelles.

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

Installation

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

Ajoute le composant, les tokens de thème HextaUI et les composants HextaUI dont il dépend.

Utilisation

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

La ligne fait un pixel physique d'épaisseur sur tous les écrans, le même filet que les bordures, et s'aligne donc avec les cartes et champs alentour. Espacez-la avec le gap du parent ou une marge.

Exemples

Vertical

Avec orientation="vertical", la ligne s'étire à la hauteur de sa rangée flex. En dehors d'une rangée flex, donnez-lui une hauteur.

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

Les enfants se placent au milieu de la ligne, qui remplit l'espace des deux côtés.

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

Alignement

align place le label au start ou à l'end, ce qui convient aux en-têtes de section et de date. Les icônes sont dimensionnées sur le texte.

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

Label vertical

Un séparateur vertical avec label garde le texte droit et trace la ligne au-dessus et en dessous.

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

Décoratif

decorative masque aux lecteurs d'écran une ligne purement visuelle, pour qu'ils n'annoncent pas un séparateur entre des lignes qui se lisent déjà bien seules.

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 ligne

Utilisez render pour produire un <span> là où un <div> n'est pas autorisé, comme dans un paragraphe.

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

Contenu long

Les longs labels passent à la ligne et les chaînes sans espace sont coupées, tandis qu'un court tronçon de ligne reste visible de chaque côté.

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 droite à gauche

Début et fin suivent le sens de lecture.

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

Accessibilité

  • Un séparateur simple a role="separator" et aria-orientation, comme un <hr>.
  • Avec decorative, il reçoit role="none" et les lecteurs d'écran l'ignorent.
  • Un séparateur avec label n'a pas de rôle. Le rôle separator rendrait son texte présentationnel, si bien que le label est lu comme du texte ordinaire.

Référence de l’API

Construit sur le Separator de Base UI. Rend un <div> et accepte ses attributs.

Separator

PropTypePar défaut
orientation
"horizontal" | "vertical""horizontal"
decorativeMasque la ligne aux lecteurs d'écran quand elle est purement visuelle.
booleanfalse
childrenUn label tracé dans la ligne. Omettez-le pour une ligne simple.
ReactNode–
alignOù le label se place le long de la ligne.
"start" | "center" | "end""center"
className
string | (state) => string–
render
ReactElement | (props, state) => ReactElement<div>
AttributDescription
data-slot="separator"Ciblez les séparateurs en CSS.
data-orientation"horizontal" ou "vertical".
data-contentPrésent quand le séparateur a un label.
data-alignL'alignement du label, quand il y en a un.
data-slot="separator-label"L'élément qui enveloppe le label.

Voir aussi