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}>
  <Drawer.Trigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Drawer Title</Drawer.Title>
      <Drawer.Description>This is a description of the drawer.</Drawer.Description>
    </Drawer.Header>
    <Drawer.Body>
      <p>This is a drawer panel. You can place any content here, including navigation, forms, or detail views.</p>
    </Drawer.Body>
    <Drawer.Footer>
      <Drawer.Close asChild>
        <Button variant="ghost" size="md" pressEffect={false}>Cancel</Button>
      </Drawer.Close>
      <Button size="md" pressEffect={false}>Save</Button>
    </Drawer.Footer>
  </Drawer.Content>
</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 です。

<Drawer.Content side="left">...</Drawer.Content>
<Drawer.Content side="right">...</Drawer.Content>
<Drawer.Content side="top">...</Drawer.Content>
<Drawer.Content side="bottom">...</Drawer.Content>

Close Button

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

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

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

API

Component Structure

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

Props

Drawer.Content

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

カスタム閉じるアイコン

Drawer.Close

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自動付与
  • オーバーレイクリックで閉じる
  • 背景スクロールロック