Drawer

시작이나 끝 가장자리에 고정된, 높이를 가득 채우는 모달 네이티브 <dialog>입니다. Drawer.Root는 Dialog.Root와 같은 props에 side를 더해 받고, 안쪽은 Dialog의 파트로 만듭니다: Dialog.Header, Dialog.Title, Dialog.Description, Dialog.Body, Dialog.Footer, Dialog.Close.

side의 기본값은 end입니다. 시작과 끝은 텍스트 방향을 따르므로, 오른쪽에서 왼쪽으로 쓰는 텍스트에서는 end가 왼쪽 가장자리입니다.

<Drawer.Root open={open} onOpenChange={setOpen}>
  <Dialog.Header>
    <Dialog.Title>Filters</Dialog.Title>
    <Dialog.Close>Close</Dialog.Close>
  </Dialog.Header>
  <Dialog.Body>…</Dialog.Body>
</Drawer.Root>

언제 쓰나요

언제: 공간이 필요한 작업을 위한 모달 사이드 패널. 필터, 설정, 목록 옆의 상세 정보 같은 것. 이름은 Dialog.Title이나 aria-label로 붙이세요.

쓰지 않을 때: 짧은 가운데 작업이나 확인 → Dialog. 아래에서 올라오는 모바일 선택기 → BottomSheet. 페이지를 계속 쓸 수 있게 두는 패널 → 모달이 아닌 제품 레이아웃.

Props

Drawer.Root props
이름	타입	필수	기본값	설명
open	`boolean`	아니요	—	제어 열림 상태. 비제어 드로어에서는 생략하세요.
defaultOpen	`boolean`	아니요	false	비제어일 때 마운트 시 드로어를 엽니다. 트리거 파트가 없어서 한 번 닫히면 다시 마운트해야 다시 열립니다.
onOpenChange	`(open: boolean, reason: DialogCloseReason) => void`	아니요	—	닫기 요청. 이유는 Dialog.Root와 같습니다.
side	`'start' \| 'end'`	아니요	'end'	고정되는 인라인 가장자리. 텍스트 방향을 따릅니다.
dismissOnEscape	`boolean`	아니요	true	Escape가 onOpenChange(false, "escape")를 호출합니다.
dismissOnBackdrop	`boolean`	아니요	true	스크림 클릭이 onOpenChange(false, "backdrop")을 호출합니다.
aria-label	`string`	아니요	—	Dialog.Title을 생략했을 때의 이름.