Overlay
Drawer
A slide-in panel from the edge of the viewport. Useful for sidebars, filter panels, and detail views.
LlmDrawerDemo
Live PreviewReact
jsx
<LlmButton onClick={() => setOpen(true)}>Open Drawer</LlmButton>
<LlmDrawer open={open} onOpenChange={setOpen} position="right">
<LlmDrawerHeader>Settings</LlmDrawerHeader>
<LlmDrawerContent>
<LlmInput placeholder="Search..." />
</LlmDrawerContent>
<LlmDrawerFooter>
<LlmButton onClick={() => setOpen(false)}>Close</LlmButton>
</LlmDrawerFooter>
</LlmDrawer>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.
LlmDrawerHeader
Title area — doubles as the drag handle on touch. Slot-only.
LlmDrawerContent
Scrollable body. Slot-only.
LlmDrawerFooter
Pinned action row at the bottom edge. Slot-only.
Import
ts
import { LlmDrawer, LlmDrawerHeader, LlmDrawerContent, LlmDrawerFooter } 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 LlmDialog — 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.