7onicDESIGN SYSTEM

Drawer

Drawer is a panel component that slides in from the edge of the screen — ideal for navigation, settings, detail views, and forms as secondary content.

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

smSide panel or settings
Left/Right: width320px
Top/Bottom: height320px
md (default)Standard (default)
Left/Right: width400px
Top/Bottom: height400px
lgComplex form
Left/Right: width480px
Top/Bottom: height480px
xlDetailed content
Left/Right: width640px
Top/Bottom: height640px
fullFull size
Left/Right: width100%
Top/Bottom: height100%
Padding (all sizes)
Header24px, bottom 0
Body24px
Footer24px, top 0
Closeright 16px, top 16px

Features

Side Placement

Slides in from 4 directions: left, right, top, or bottom. Default is 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

Use showCloseButton to show or hide the close button. Use closeIcon to replace the default icon.

{/* 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"

Slide-in direction

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

Panel size (left/right = width, top/bottom = height: 320/400/480/640/full)

showCloseButtontrue
boolean

Show the built-in close button

closeIconBuilt-in SVG icon
ReactNode

Custom close icon

Drawer.Close

asChildfalse
boolean

Use child element as the trigger

Anatomy

1
2
3
4
Drawer title
5
6
7
1
Overlay
Background overlay
2
Content
Side panel body
3
Header
Title area
4
Title
Heading text
5
Close
Close button
6
Body
Main content
7
Footer
Action buttons

Best Practices

✓

Recommended

  • ✓Use Drawer for secondary content and navigation
  • ✓Choose Drawer when you need to preserve the main content context
  • ✓Match the side to the content purpose (nav → left, detail → right)
  • ✓Place action buttons in the Footer to make interactions clear
✕

Don't

  • ✕Don't use Drawer for important confirmation dialogs — use Modal instead
  • ✕Don't nest a Drawer inside another Drawer
  • ✕Don't use Drawer for multi-step wizards — navigate to a dedicated page instead
  • ✕Don't use full size casually — it appears as full screen on mobile

Accessibility

Keyboard

EscClose the Drawer
TabCycle focus within the Drawer

ARIA / WCAG

  • role="dialog" Set automatically by Radix
  • aria-labelledby Auto-linked to Title
  • aria-describedby Auto-linked to Description
  • aria-modal="true" Set automatically by Radix
  • Closes on overlay click
  • Body scroll is locked