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
上
下
| 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周りの余白
labelundefinedReactNodeDivider上に表示するコンテンツ（水平のみ）
labelPosition"center""left" | "center" | "right"ラベルの配置位置
decorativetrueboolean装飾目的のセパレーター（trueの場合role="none"）
| Name | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Dividerの方向 |
variant | "solid" | "dashed" | "dotted" | "solid" | 線のスタイル |
color | "default" | "muted" | "strong" | "default" | 線の色の強度 |
spacing | "sm" | "md" | "default" | "lg" | "default" | Divider周りの余白 |
label | ReactNode | undefined | Divider上に表示するコンテンツ（水平のみ） |
labelPosition | "left" | "center" | "right" | "center" | ラベルの配置位置 |
decorative | boolean | true | 装飾目的のセパレーター（trueの場合role="none"） |