Divider
콘텐츠 영역이나 인라인 항목을 구분하는 React 컴포넌트입니다. 실선·점선·텍스트 레이블·세로 구분을 props와 유틸리티 클래스로 조합합니다.
기본
레이블이 없는 가로 Divider는 의미 있는 구분선인 hr로 렌더링됩니다.
위 콘텐츠
아래 콘텐츠
점선
divider_dashed로 점선 스타일을 적용합니다.
위 콘텐츠
아래 콘텐츠
텍스트 레이블
label이나 children을 전달하면 role=separator인 div와 양쪽 선으로 렌더링됩니다. plain은 레이블 굵기를 낮춥니다.
섹션 제목
보조 설명
레이블 정렬
divider_orient-left · divider_orient-right로 레이블 위치를 조정합니다. 기본은 가운데입니다.
왼쪽
가운데
오른쪽
세로
vertical은 인라인·flex 행 안에서 장식용 세로 구분선으로 사용하며 스크린 리더에서는 숨깁니다.
항목 A항목 B항목 C
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
dashed | boolean | false | 점선 스타일 (divider_dashed) |
plain | boolean | false | 레이블 글자 굵기를 400으로 변경 (divider_plain) |
vertical | boolean | false | 세로 구분선 (divider_vertical) |
orient | 'left' | 'right' | — | 레이블 정렬. 생략 시 가운데 |
label | ReactNode | — | 구분선 레이블. children이 있으면 children을 우선 사용 |
tag | 'auto' | 'hr' | 'div' | 'span' | auto | 루트 태그. auto는 레이블 없는 가로 hr · 레이블 있는 가로 div · 세로 span 선택 |
API · Children
| Children | 설명 |
|---|---|
children | 레이블 콘텐츠. label prop보다 우선하며 ReactNode를 지원 |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
divider | 가로·세로 구분선 루트 |
divider_dashed | 점선 스타일 |
divider_plain | 레이블 글자 굵기를 400으로 변경 |
divider_vertical | 세로 구분선 (인라인·flex 행) |
divider_orient-left · divider_orient-right | 레이블 좌·우 정렬 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--divider-color | var(--color-border-subtle) | 선 색상 |
--divider-thickness | 1px | 선 두께 |
--divider-margin-y | var(--space-md) | 가로 구분선 상하 여백 |
--divider-margin-x | var(--space-sm) | 세로 구분선 좌우 여백 |
--divider-text-gap | var(--space-md) | 레이블·선 사이 간격 |
--divider-orient-inset | 5% | 좌·우 정렬 시 짧은 쪽 선 길이 |