Separator

한눈에#

콘텐츠 사이 1px 헤어라인 구분선입니다 — 기본은 순수 장식(role="none")이라 접근성 트리에서 제외되고, decorative={false}일 때만 의미적 구분자가 됩니다.

위 콘텐츠

아래 콘텐츠

• 1px 헤어라인 고정
• 기본 role=none 장식
• horizontal·vertical
• decorative=false 의미적

두께는 1px 고정, 길이는 부모를 따릅니다 — 대부분의 경우 기본(장식)이 맞습니다

사용 시점#

• 이럴 때: 관련 없는 콘텐츠 그룹 사이를 1px 헤어라인으로 가를 때 — 대부분은 순수 장식(role="none")이 맞습니다.
• 의미적 구분이 필요하면: 스크린리더가 경계를 인지해야 하는 경우에만 decorative={false}로 의미적 구분자(role="separator")로 만듭니다.
• 대신 여백: 단순히 간격만 필요하면 구분선 없이 토큰 간격(space-*)으로 충분합니다 — 선은 진짜 경계일 때만.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

Separator를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기→

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

변형#

편집

복제

삭제

크기#

두께는 1px 헤어라인 고정입니다. 길이는 부모를 따릅니다 — horizontal은 폭 100%, vertical은 플렉스 컨테이너 높이에 맞춰 늘어납니다.

상태#

정적 컴포넌트라 인터랙션 상태가 없습니다(RSC).

Props#

접근성#

• 기본(decorative: true)은 role="none" — 시각 구분일 뿐 의미가 없어 보조기술이 무시합니다. 대부분의 경우 기본값이 맞습니다
• decorative={false}면 role="separator" + aria-orientation이 붙어 콘텐츠 그룹의 의미적 경계로 보고됩니다 (예: 메뉴 섹션 구분)
• 색만으로 정보를 전달하지 않습니다 — 경계는 레이아웃 보조일 뿐입니다

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).