72はじめる
HextaUI

Separator

コンテンツを水平または垂直に区切る細線です。ラベルを付けたり、見た目だけの線として装飾モードにしたりできます。

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

インストール

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

コンポーネント、HextaUIのテーマトークン、依存するHextaUIコンポーネントを追加します。

使い方

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

線の太さはどの画面でも物理1ピクセルで、境界線と同じ細い線なので、周囲のカードや入力欄と揃います。間隔は親の gap かマージンで付けてください。

例

垂直

orientation="vertical" では、線が flex の行の高さまで伸びます。flex の行の外では、高さを指定してください。

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

子要素は線の中央に置かれ、線が両側の空間を埋めます。

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

配置

align はラベルを start または end に移動します。セクションや日付の見出しに向いています。アイコンはテキストに合わせたサイズになります。

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

縦ラベル

ラベル付きの縦の separator は、テキストを正立のままにして、その上下に線を描画します。

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

装飾

decorative は見た目だけの線をスクリーンリーダーから隠すので、すでに単独で読める行の間に separator が読み上げられません。

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

インライン

段落の中など <div> が使えない場所で <span> を出力するには、render を使います。

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

長いコンテンツ

長いラベルは折り返され、区切りのない文字列は改行されますが、両側には短い線が残ります。

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

右から左

start と end は文字の読み方向に従います。

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

アクセシビリティ

  • ラベルのない separator は、<hr> と同様に role="separator" と aria-orientation を持ちます。
  • decorative を指定すると role="none" になり、スクリーンリーダーは読み飛ばします。
  • ラベル付きの separator には role がありません。separator の role を付けるとテキストがプレゼンテーショナルになってしまうため、ラベルはプレーンテキストとして読み上げられます。

APIリファレンス

Base UI の Separator 上に構築されています。<div> を描画し、その属性を受け付けます。

Separator

プロパティ型デフォルト
orientation
"horizontal" | "vertical""horizontal"
decorative見た目だけの線を、スクリーンリーダーから隠します。
booleanfalse
children線の中に描画するラベル。単純な線にするには省略します。
ReactNode–
align線に沿ったラベルの位置。
"start" | "center" | "end""center"
className
string | (state) => string–
render
ReactElement | (props, state) => ReactElement<div>
属性説明
data-slot="separator"CSS でセパレーターを指定します。
data-orientation"horizontal" または "vertical"。
data-contentseparator にラベルがあるときに付きます。
data-alignラベルがある場合の、ラベルの配置。
data-slot="separator-label"ラベルを囲む要素。

関連