Separator

영역이나 헤더 안을 선으로 나눠요. 간격만으로 나뉘지 않을 때 써요. DropdownMenu, ContextMenu, Select 안에서는 DropdownMenuSeparator, ContextMenuSeparator, SelectSeparator를 써요.

사용 예시

영역 나누기

한 상자 안의 영역 사이에 가로선을 둬요.

담당자김민아

마감일10월 17일 금

tsx

<div className="frame rounded-r12 flex flex-col">  <div className="flex flex-col gap-tight p-4">    <span className="text-label">담당자</span>    <span className="text-caption text-fg-muted">김민아</span>  </div>  <Separator />  <div className="flex flex-col gap-tight p-4">    <span className="text-label">마감일</span>    <span className="text-caption text-fg-muted">10월 17일 금</span>  </div></div>

헤더 안 세로선

제목과 탭처럼 나란히 둔 요소 사이에 세로선을 둬요.

프로젝트

tsx

<header className="flex h-9 items-center gap-stack">  <span className="text-section">프로젝트</span>  <Separator orientation="vertical" className="my-2" />  <Tabs defaultValue="tasks">    <TabsList className="border-b-0">      <TabsTrigger value="tasks">업무</TabsTrigger>      <TabsTrigger value="files">파일</TabsTrigger>    </TabsList>  </Tabs></header>

목록 안 구분

성격이 다른 동작 사이에 선을 둬요. 지우기처럼 위험한 동작을 따로 보여요.

tsx

<div className="frame rounded-r12 flex flex-col p-1">  <button type="button" className="rounded-r8 text-label hover:bg-bg-neutral-hover gap-tight flex items-center px-3 py-2">    <Pencil className="size-4" />    이름 바꾸기  </button>  <button type="button" className="rounded-r8 text-label hover:bg-bg-neutral-hover gap-tight flex items-center px-3 py-2">    <Copy className="size-4" />    복제  </button>  <Separator className="my-1" />  <button type="button" className="rounded-r8 text-label text-fg-danger-contrast hover:bg-bg-neutral-hover gap-tight flex items-center px-3 py-2">    <Trash2 className="size-4" />    지우기  </button></div>

간격 먼저

알림새 업무, 댓글

언어한국어

권장

간격만으로 나뉘면 선을 두지 않아요.

알림

새 업무, 댓글

언어

한국어

지양

줄마다 선을 두면 어디까지가 한 항목인지 보이지 않아요.

컨트롤

위

아래

orientation

tsx

<Separator />

명세

이름
이름	값	기본
orientation	horizontal, vertical	horizontal
horizontal은 h-px 가로선, vertical은 w-px 세로선이고 부모가 가로 flex면 부모 높이만큼 늘어나요.
className	string	-
선 앞뒤 간격은 my-나 mx-로 적어요.