Separator

要素を区切るための 1px の直線。Item (16px 余白) と Section (24px 余白) の 2 種類、Horizontal / Vertical の 2 方向。中身は Radix Separator (ui/separator) + kind による padding 制御のラッパー。

テキスト A

テキスト B

import { Separator } from "@/components/Separator";

<p>テキスト A</p>
<Separator kind="item" />
<p>テキスト B</p>

利用例: カード内のセクション分割

異なる性質の情報グループは kind="section" で 24px の強い区切り。

基本情報

山田太郎 / 03-1234-5678

カスタム属性

会員番号: VIP-001 / 興味関心: 新サービス

利用例: リスト項目の区切り

同じ性質の項目間は kind="item" で 16px の控えめな区切り。

通話 / 山田太郎 / 12:34

SMS / 鈴木花子 / 11:20

メール / 田中翔太 / 10:05

仕様

primitive: src/components/ui/separator.tsx(Radix Separator)を内部で利用、外側に padding 制御を載せた src/components/Separator.tsx を提供
線色: --border (#D1D5DB) / 線幅: --border-width-thin (1px)
余白 (padding):
- kind="item": --spacing-xs (16px)
- kind="section": --spacing-s (24px)
Vertical は align-self: stretch で flex 親のクロス軸高さに追従
ARIA: role="separator" + aria-orientation(Radix Separator が自動付与)

利用基準

使うべき時

同一コンテナ内で情報の種類が切り替わることを明示
長いリストでスキャンしやすくする視覚ガイド
メニュー / ツールバー内のグループ分け
セクション境界には kind=section (強)、リスト項目には kind=item (弱)

使わない時

情報の塊自体が別オブジェクトの場合 → Card で囲む
余白だけで区切りが認識できる場合 → 過剰なラインはノイズ

Figma

Figma で Separator を開く ↗