03 · Components · 콘텐츠
디바이더Divider
콘텐츠 덩어리 사이의 경계를 가느다란 선으로 표시. 여백이 충분하다면 선을 생략하는 편이 깔끔합니다.
StableWCAG AA
기본
tsx
<Divider />미리보기
이전 섹션
다음 섹션
레이블 포함
tsx
<Divider label="또는" />미리보기
또는
세로 방향
tsx
<div className="flex items-center gap-4 h-6">
<span>첫째</span>
<Divider orientation="vertical" />
<span>둘째</span>
</div>미리보기
첫째둘째셋째
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | 방향. vertical은 상위 요소에 높이가 있어야 보입니다. |
label | string | horizontal일 때만 유효. 중앙에 텍스트 노출. |