Divider

いつ使うか

• コンテンツのセクション間に視覚的・意味的な区切りを入れるとき
• Stack 内で関連度の異なるグループを分離するとき
• ツールバーやナビゲーション内で項目をグループ分けするとき

いつ使わないか

• 装飾目的の罫線には border ユーティリティを使う
• 十分な gap やスペースで区別できる場合は不要である

Usage

import { Divider } from '@bi-shop-it/ui/divider';

<Stack>
  <p>セクション A</p>
  <Divider />
  <p>セクション B</p>
</Stack>;

Props

状態

水平（デフォルト）

Stack 内でセクションを区切る基本的な使い方。

<Stack>
  <p>セクション A</p>
  <Divider />
  <p>セクション B</p>
</Stack>

垂直

横並びの要素間を区切るとき orientation="vertical" を指定する。

<div className="flex h-20 items-center gap-4">
  <p>左</p>
  <Divider orientation="vertical" />
  <p>右</p>
</div>

レスポンシブ

Stack の direction と連動させ、ブレークポイントで方向を切り替えられる。

<Stack direction={{ base: 'column', md: 'row' }}>
  <p>セクション A</p>
  <Divider orientation={{ base: 'horizontal', md: 'vertical' }} />
  <p>セクション B</p>
</Stack>

アクセシビリティ

コンポーネントが内部で処理すること

• role="separator" が Radix UI によって自動的に付与される
• aria-orientation が orientation prop に応じて設定される
• decorative={false} を強制し、常にセマンティックな区切りとして機能する

利用者が対応すること

• 装飾目的の罫線には Divider を使わず、CSS の border を使うこと

関連コンポーネント

• Stack / HStack — 垂直・水平方向のレイアウト