Drawer

Drawerは、画面の端からスライドインするパネルコンポーネントです。ナビゲーション、設定、詳細情報、フォームなどのサブコンテンツを表示するのに適しています。

4
Sides
5
Sizes
Built-in
Scroll
Radix
Base

Playground

Preview
MDRight
Drawer
Side
Size
Content
Options
Button Style
Cancel
Save
const [open, setOpen] = useState(false)

<Drawer open={open} onOpenChange={setOpen}>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerDescription>This is a description of the drawer.</DrawerDescription>
    </DrawerHeader>
    <DrawerBody>
      <p>This is a drawer panel. You can place any content here, including navigation, forms, or detail views.</p>
    </DrawerBody>
    <DrawerFooter>
      <DrawerClose asChild>
        <Button variant="ghost" size="md" pressEffect={false}>Cancel</Button>
      </DrawerClose>
      <Button size="md" pressEffect={false}>Save</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Sizes

smサイドパネル・設定
Left/Right: width320px
Top/Bottom: height320px
md (default)標準(デフォルト)
Left/Right: width400px
Top/Bottom: height400px
lg複雑なフォーム
Left/Right: width480px
Top/Bottom: height480px
xl詳細コンテンツ
Left/Right: width640px
Top/Bottom: height640px
fullフルサイズ
Left/Right: width100%
Top/Bottom: height100%
パディング(全サイズ共通)
Header24px (下 0)
Body24px
Footer24px (上 0)
Closeright 16px, top 16px

Features

Side Placement

4方向(left、right、top、bottom)からスライドインできます。デフォルトは right です。

<DrawerContent side="left">...</DrawerContent>
<DrawerContent side="right">...</DrawerContent>
<DrawerContent side="top">...</DrawerContent>
<DrawerContent side="bottom">...</DrawerContent>

Close Button

showCloseButton で閉じるボタンの表示/非表示を制御できます。closeIcon でアイコン差し替えも可能です。

{/* Hide close button */}
<DrawerContent showCloseButton={false}>...</DrawerContent>

{/* Custom close icon */}
<DrawerContent closeIcon={<ArrowRight />}>...</DrawerContent>

API

Component Structure

Drawer— Radix Dialog
.Trigger.ContentProps.Header.Title.Description.Body.Footer.CloseProps.Overlay.Portal

Props

DrawerContent

side"right"
"left" | "right" | "top" | "bottom"

スライド方向

size"md"
"sm" | "md" | "lg" | "xl" | "full"

パネルサイズ(左右は幅、上下は高さ: 320/400/480/640/full)

showCloseButtontrue
boolean

内蔵の閉じるボタンを表示

closeIconBuilt-in SVG icon
ReactNode

カスタム閉じるアイコン

DrawerClose

asChildfalse
boolean

子要素をトリガーとして使用

Anatomy

1
2
3
4
Drawer title
5
6
7
1
Overlay
背景オーバーレイ
2
Content
サイドパネル本体
3
Header
タイトル領域
4
Title
見出しテキスト
5
Close
閉じるボタン
6
Body
メインコンテンツ
7
Footer
アクションボタン

Best Practices

推奨

  • サブコンテンツやセカンダリナビゲーションにDrawerを使用する
  • メインコンテンツの文脈を保つ必要がある場合にDrawerを選択する
  • 適切なsideをコンテンツの用途に合わせて選択する(ナビ→left、詳細→right)
  • Footerにアクションボタンを配置して操作を明確にする

避けるべき

  • 重要な確認ダイアログにDrawerを使わない — Modalを使用する
  • Drawerの中にDrawerをネストしない
  • 大量のステップを持つウィザードにDrawerを使わない — 専用ページに遷移する
  • fullサイズを安易に使わない — モバイルではフルスクリーンに見えてしまう

Accessibility

キーボード操作

EscDrawerを閉じる
TabDrawer内でフォーカス循環

ARIA / WCAG

  • role="dialog" Radix自動付与
  • aria-labelledby Title連携
  • aria-describedby Description連携
  • aria-modal="true" Radix自動付与
  • オーバーレイクリックで閉じる
  • 背景スクロールロック