본문으로 건너뛰기

Divider

내용의 관계를 조용히 나누는 얇은 선.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

First area

Second area

orientation

inset

label

decorative

예시

상태

가로
First area
Second area
세로
First area
Second area
들여쓰기
First area
Second area
라벨
First area
또는
Second area

쓰임 예

장식
First area
Second area

이렇게 · 이렇게 하지 않기

이렇게 여백만으로 구분되지 않을 때만 쓴다. 라벨이 있는 구분선에는 “또는”처럼 짧은 연결어만 둔다. 장식용 구분선은 보조기기에서 숨긴다.
이렇게 여백으로 충분하면 선을 쓰지 않는다.
이렇게 하지 않기 선 색으로 상태나 강조를 표현하지 않는다.

토큰과 속성

이름	타입	기본값	설명
`orientation?`	`'horizontal' \| 'vertical'`	`horizontal`	가로는 <hr>, 세로는 role="separator" aria-orientation="vertical".
`inset?`	`boolean`	`false`	양끝을 16px 들여 목록 행 사이에 쓴다.
`label?`	`ReactNode`		라벨형 구분선(가로만). 라벨은 읽힌다. 비우면 없음.
`decorative?`	`boolean`	`false`	순수 장식이면 보조기술에서 숨긴다. 라벨이 있으면 무시.
그 밖의 속성	—	—	id, aria-* 등 네이티브 속성은 그대로 전달된다. children은 받지 않는다(label을 쓴다). className·style은 받지 않는다.