Overlay
Drawer
A slide-in panel from the edge of the viewport. Useful for sidebars, filter panels, and detail views.
LlmDrawerDemo
Live PreviewReact
html
<llm-button (click)="open = true">Open Drawer</llm-button>
<llm-drawer [(open)]="open" position="right">
<llm-drawer-header>Settings</llm-drawer-header>
<llm-drawer-content>
<llm-input placeholder="Search..." />
</llm-drawer-content>
<llm-drawer-footer>
<llm-button (click)="open = false">Close</llm-button>
</llm-drawer-footer>
</llm-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.
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.