kaze風
Divider
区切り線
プレビュー
デフォルト
Subtle
テキスト付き
または
使いどころ
使う場面
- 意味のまとまりが切り替わる場所に線を引く（設定画面のグループ間、メニューの区分けなど）
- 「または」のように 2 つの選択肢をつなぐときは text を付ける（ログインのメールとソーシャルの間など）
- 線を主張させたくない密な領域では subtle を使う
使わない場面
- 余白だけで区切れる場面。線を足すより gap や padding を整える
- 見出しで区切るべき場面。節の区切りは Heading でタイトルを付ける
- 表の行間やリストの行間。Table の罫線や List の divided を使う
使い方
<Divider />
<Divider subtle />
<Divider text="または" />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
text | string | なし | 中央に表示するテキスト（指定するとテキスト付き区切り線になる） |
subtle | boolean | false | 薄い色のバリアント |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- text なしは <hr> で出力され、区切りとして読み上げられる
- text 付きは <div> で出力され、区切りの役割は伝わらず、文字だけが読まれる。「または」のような文言は読まれても意味が通る書き方にする
- 見た目だけの線で、読み上げでは不要な場面では aria-hidden を付ける
文言
- text は「または」「ほか」のように 1 語から数語で書く。説明文にはしない