7onicDESIGN SYSTEM

Divider

Dividerは、コンテンツ間を視覚的に区切るためのシンプルなコンポーネントです。水平・垂直方向に対応し、ラベル付きの区切り線としても使用できます。

3
Variants
4
Spacing
Label
With Label
Radix
Base

Playground

Preview
H

Content above the divider

Content below the divider

Variant
Color
Spacing
Direction
Label
<Divider />

Variants

solidSolid
セクション区切り

デフォルトの実線。一般的なコンテンツ区切りに最適。

dashedDashed
サブ区切り

破線スタイル。軽い区切りやドラフト状態の表現に。

dottedDotted
補足的な区切り

点線スタイル。最も控えめな区切りとして使用。

Spacing

sm
余白8px

上

下

md
余白12px

上

下

default
余白16px

上

下

lg
余白32px

上

下

API

Props

orientation"horizontal"
"horizontal" | "vertical"

Dividerの方向

variant"solid"
"solid" | "dashed" | "dotted"

線のスタイル

color"default"
"default" | "muted" | "strong"

線の色の強度

spacing"default"
"sm" | "md" | "default" | "lg"

Divider周りの余白

labelundefined
ReactNode

Divider上に表示するコンテンツ（水平のみ）

labelPosition"center"
"left" | "center" | "right"

ラベルの配置位置

decorativetrue
boolean

装飾目的のセパレーター（trueの場合role="none"）

Anatomy

1

With label

2
3
OR

Plain

4
Default margin16px
Border1px
Label padding12px
1
Root
ラインコンテナ
2
Line
1px ボーダー
3
Label
中央テキスト（任意）

Best Practices

✓

推奨

  • ✓関連するコンテンツグループの区切りに使用する
  • ✓ラベル付きDividerでセクションの意味を明確にする
  • ✓ナビゲーション項目やツールバーの区切りにverticalを使用する
  • ✓コンテンツの階層に合わせてcolorを使い分ける
✕

避けるべき

  • ✗Dividerを過度に使用してレイアウトを複雑にしない
  • ✗spacingの代わりにDividerだけで余白を確保しない
  • ✗意味のない装飾としてDividerを使用しない
  • ✗同じセクション内で異なるvariantを混在させない

Accessibility

キーボード操作

Dividerは装飾的な要素のため、キーボード操作の対象外です。フォーカスを受け取りません。

ARIA / WCAG

  • role="none" 装飾目的のDivider（decorative=true）
  • role="separator" 意味的な区切り（decorative=false）
  • aria-orientation 方向を自動設定
  • Radix Separator Primitive準拠