7onicDESIGN SYSTEM

Divider

Divider는 콘텐츠 사이를 시각적으로 구분하는 컴포넌트입니다. 수평/수직 방향을 모두 지원하며 인라인 라벨도 표시할 수 있습니다.

3
Variants
4
Spacing
Label
With Label
Radix
Base

Playground

Preview
H

Content above the divider

Content below the divider

Variant
Color
Spacing
Direction
Label
<Divider />

Variants

solidSolid
섹션 구분

일반적인 콘텐츠 구분에 적합한 기본 실선입니다.

dashedDashed
서브 구분선

가볍거나 초안 상태의 구분을 나타내는 파선 스타일입니다.

dottedDotted
보조 구분선

가장 은은한 구분을 나타내는 점선 스타일입니다.

Spacing

sm
여백8px

위

아래

md
여백12px

위

아래

default
여백16px

위

아래

lg
여백32px

위

아래

API

Props

orientation"horizontal"
"horizontal" | "vertical"

Divider 방향

variant"solid"
"solid" | "dashed" | "dotted"

선 스타일

color"default"
"default" | "muted" | "strong"

선 색상 강도

spacing"default"
"sm" | "md" | "default" | "lg"

Divider 주변 여백

labelundefined
ReactNode

Divider에 표시할 콘텐츠 (수평 전용)

labelPosition"center"
"left" | "center" | "right"

라벨 배치 위치

decorativetrue
boolean

장식용 구분선, true일 때 role="none"

Anatomy

1

With label

2
3
OR

Plain

4
Default margin16px
Border1px
Label padding12px
1
Root
라인 컨테이너
2
Line
1px 테두리
3
Label
중앙 텍스트 (선택)

Best Practices

✓

권장

  • ✓관련 콘텐츠 그룹 구분에 사용
  • ✓라벨 Divider로 섹션 의미를 명확히 표시
  • ✓내비게이션 항목, 툴바 구분에는 vertical 사용
  • ✓콘텐츠 계층에 맞게 color를 다르게 사용
✕

지양

  • ✗Divider를 과도하게 사용해 레이아웃을 복잡하게 만들지 않기
  • ✗Divider만으로 여백을 확보하지 않기, spacing prop 활용
  • ✗의미 없는 장식용 Divider 사용하지 않기
  • ✗같은 섹션 내에서 variant를 혼용하지 않기

Accessibility

키보드 조작

Divider는 장식 요소이므로 키보드 내비게이션 대상이 아닙니다. 포커스를 받지 않습니다.

ARIA / WCAG

  • role="none": 장식용 Divider (decorative=true)
  • role="separator": 의미 있는 구분선 (decorative=false)
  • aria-orientation 자동 설정
  • Radix Separator Primitive 준수