Overlay
Drawer
A slide-in panel from the edge of the viewport. Useful for sidebars, filter panels, and detail views.
AtlDrawerDemo
Live PreviewReact
html
<atl-button (click)="open = true">Open Drawer</atl-button>
<atl-drawer [(open)]="open" position="right">
<atl-drawer-header>Settings</atl-drawer-header>
<atl-drawer-content>
<atl-input placeholder="Search..." />
</atl-drawer-content>
<atl-drawer-footer>
<atl-button (click)="open = false">Close</atl-button>
</atl-drawer-footer>
</atl-drawer>API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls drawer visibility |
onOpenChange | (open: boolean) => void | — | Called when open state changes |
position | 'left' | 'right' | 'top' | 'bottom' | 'right' | Which edge the drawer slides from |
size | 'sm' | 'md' | 'lg' | 'full' | 'md' | Width (or height for top/bottom) |
closeOnBackdrop | boolean | true | Close when clicking the backdrop |
Composition parts
Drawer is composed from the parts below. Each part is its own component — drop the ones you don't need.
AtlDrawerHeader
Title area — doubles as the drag handle on touch. Slot-only.
AtlDrawerContent
Scrollable body. Slot-only.
AtlDrawerFooter
Pinned action row at the bottom edge. Slot-only.
Import
ts
import { AtlDrawer, AtlDrawerHeader, AtlDrawerContent, AtlDrawerFooter } from '@atelier-ui/angular';Accessibility
ARIA roledialog (aria-modal="true")
| Key | Action |
|---|---|
| Escape | Close the drawer. Focus returns to the trigger. |
| Tab / Shift+Tab | Cycle through focusable elements inside the drawer (focus is trapped). |
- Same accessibility model as AtlDialog — the visual slide-in is purely presentational.
- Backdrop click closes the drawer only when closeOnBackdrop is true; Escape always closes.
See the accessibility overview for the site-wide WCAG stance.