セパレータ

hc-separator は細い区切り線です。ネイティブの <hr> に .hc-separator を適用します — この要素はすでに暗黙の role="separator" と aria-orientation="horizontal" のセマンティクスを 運んでいるため、これはブラウザのデフォルトの罫線をトークンから描く 1 本のヘアラインに差し替えるだけです。純 CSS、JavaScript なし。

別名: 区切り線、ディバイダー。

水平

デフォルトです。上下にマージンを持つ全幅のヘアライン。

PreviewCode

Account settings

---

Billing

<hr class="hc-separator">

垂直

インラインの区切り — 例えば水平のツールバーやリンク行の項目間 — には data-orientation="vertical" を設定します。線はフレックス行の高さまで 伸びます。

垂直セパレータのための HTML 要素はなく、素の <hr> は aria-orientation="horizontal" を報告するため、セマンティクスを正しく 保つには aria-orientation="vertical" を足してください。

PreviewCode

Profile

---

Settings

---

Log out

<nav style="display:flex;align-items:center;gap:.5rem;">
  <a href="/profile">Profile</a>
  <hr class="hc-separator" data-orientation="vertical" aria-orientation="vertical">
  <a href="/settings">Settings</a>
  <hr class="hc-separator" data-orientation="vertical" aria-orientation="vertical">
  <a href="/logout">Log out</a>
</nav>

垂直の変種は align-self: stretch に依存するため、親はフレックス行で あるべきです(行の高さが線の長さを決めます)。stretch の文脈の外でも 見えるよう、min-block-size のフォールバックがあります。

hc-toolbar の中では 素の <hr> にクラスは一切不要です — ツールバー自身がスタイルします。

ラベル

「または」の区切り(認証オプション、代替フロー)には、内側に .hc-separator__label を置きます — ミュートされた中央のラベルの周りに ヘアラインが伸びます。<hr> はテキストを含められないため、この形は 明示的な role="separator" を持つコンテナです(水平のみ):

PreviewCode

Sign in with SSO

or

Sign in with email

<div class="hc-separator" role="separator" aria-orientation="horizontal">
  <span class="hc-separator__label">or</span>
</div>

ラベルのテキストはページコンテンツの一部として読み上げられます — 短く保ってください(「or」「and」)。区切りが純粋に装飾であるべきなら、 代わりに素の <hr> 形を使います。

アクセシビリティ

• コンテンツセクション間のセパレータは装飾ではなく意味のある構造 です — <hr> は暗黙の separator role でそれをスクリーンリーダーに 公開し、ほとんどの読み上げカーソルが読み上げます。
• 垂直のセパレータには常に aria-orientation="vertical" を足して ください。この role のデフォルトは水平です。
• 区切りが純粋に視覚的で、周囲の構造がすでにグルーピングを伝えている なら、二重に読み上げられないよう role="none" / aria-hidden="true" で隠せます。ページセクションの罫線のほとんどは デフォルトのセマンティクスを保つべきです。

テーマ用トークン

component トークン(component.tokens.json):

トークンパス	用途
separator.color	線の色(デフォルトは border トークン)。
separator.size	線の太さ(1px)。
separator.spacing	マージン — 水平はブロック方向、垂直はインライン方向。
separator.label-gap	ラベルと線分の間のギャップ。
separator.label-fg	ラベルの色(ミュートテキスト)。
separator.label-font-size	ラベルのフォントサイズ。

CSS 変数

生成される CSS 変数を表示

--hc-separator-color | -size | -spacing
--hc-separator-label-gap | -label-fg | -label-font-size

関連

• ツールバー — アクションのクラスターを垂直セパレータでグルーピングします。
• カード — カードの ヘッダーとボディの間に水平セパレータがよく合います。