# Drawer Drawer supports overlay and inline presentation, edge positioning, structured footer actions, modal versus non-modal behavior, and focus management. It is a better fit than a dialog when users need more room or should keep page context visible beside the panel. ## Import ```ts import { DrawerComponent } from 'ui'; ``` ## Basic overlay drawer ```ts import { Component, model, signal } from '@angular/core'; import { ButtonComponent, DrawerComponent, QuickAction } from 'ui'; @Component({ selector: 'app-drawer-basic-example', standalone: true, imports: [ButtonComponent, DrawerComponent], template: `

Open drawer

Renewal risk increased after delayed procurement review.

Next suggested action: schedule finance follow-up before Friday.

`, }) export class DrawerBasicExampleComponent { protected readonly visible = model(false); protected readonly primaryAction = signal({ label: 'Add note', variant: 'primary', action: () => this.visible.set(false), }); protected readonly secondaryAction = signal({ label: 'Close', variant: 'secondary', action: () => this.visible.set(false), }); } ``` ## Overlay and inline types ```ts import { Component, model, signal } from '@angular/core'; import { ButtonComponent, DrawerComponent, QuickAction } from 'ui'; @Component({ selector: 'app-drawer-types-example', standalone: true, imports: [ButtonComponent, DrawerComponent], template: `

Overlay drawer

Inline drawer

Inline drawer reflows the workspace Open the panel to see the content column shrink smoothly instead of jumping.

This bordered region represents page content. Inline mode keeps the panel inside the host layout, so it should feel attached to the workspace rather than floating above it.

The overlay variant is rendered below, outside this card, spanning the full viewport.

Filters Review Side tools

Use inline drawers for filters, contextual review, or stacked tools that should feel anchored to the workspace instead of masking the whole app.

When you need a focused task that blocks the rest of the UI, prefer an overlay drawer.

Main list Stays visible while the inline panel opens.

Inspector area Good fit for contextual tools and side editing.

Viewport context Helps users keep spatial awareness during edits.

`, }) export class DrawerTypesExampleComponent { protected readonly overlayVisible = model(false); protected readonly inlineVisible = model(false); protected readonly closeInlineAction = signal({ label: 'Done', variant: 'primary', action: () => this.inlineVisible.set(false), }); protected readonly closeOverlayAction = signal({ label: 'Done', variant: 'primary', action: () => this.overlayVisible.set(false), }); } ``` ## Positions and sizes ```ts import { Component, model, signal } from '@angular/core'; import { ButtonComponent, DrawerComponent, QuickAction } from 'ui'; const bodyStackStyle = 'display:flex;flex-direction:column;gap:0.875rem;color:var(--color-neutral-foreground-rest);font-size:0.875rem;line-height:1.55'; @Component({ selector: 'app-drawer-positions-example', standalone: true, imports: [ButtonComponent, DrawerComponent], template: `

Left small

Right large · scroll

Bottom medium

The compact width suits navigation rails, shortcuts to sibling views, or secondary actions that should not dominate the canvas.

Quick links

Create record in current context
Export filtered table to CSV
Open keyboard shortcuts reference

@for (paragraph of scrollParagraphs; track $index) {

}

Bottom placements work well for cart summaries, approvals, or short step-through flows that should stay attached to the page chrome.

This copy stays concise on purpose — open “Right large · scroll” to see the drawer body scroll when content exceeds the available height.

`, }) export class DrawerPositionsExampleComponent { readonly bodyStackStyle = bodyStackStyle; protected readonly scrollParagraphs = [ 'Before shipping changes, double-check workspace membership and downstream permissions.', 'Workspace admins may transfer ownership, archive projects, and restore soft-deleted items for 30 days.', 'Version notes are lightweight — still add why each rollout matters for future auditors.', 'Directory sync refreshes nightly; local entitlement edits still persist immediately after save.', 'Email alerts can be silenced module-by-module unless they are tagged as security-critical.', 'Exports that include personal information must honor your retention policy; queue large payloads.', 'Keyboard shortcuts activate only while focus lives within the interactive surface of the shell.', 'Idle sessions extend tokens automatically when the tab stays foreground and trusted.', 'Draft templates remain private until co-authors explicitly publish a stable revision.', 'Full API manuals live next to onboarding guides — link banners stay pinned in workspace footers.', 'When performance regresses capture the tracing id from network responses before filing support.', 'Permission deltas propagate globally within seconds once the optimistic save completes.', ]; protected readonly leftVisible = model(false); protected readonly rightVisible = model(false); protected readonly bottomVisible = model(false); protected readonly closeLeftAction = signal({ label: 'Close', variant: 'primary', action: () => this.leftVisible.set(false), }); protected readonly closeRightAction = signal({ label: 'Close', variant: 'primary', action: () => this.rightVisible.set(false), }); protected readonly closeBottomAction = signal({ label: 'Close', variant: 'primary', action: () => this.bottomVisible.set(false), }); } ``` ## Closable, static, and alert behavior ```ts import { Component, model, signal } from '@angular/core'; import { ButtonComponent, DrawerComponent, QuickAction } from 'ui'; @Component({ selector: 'app-drawer-behavior-example', standalone: true, imports: [ButtonComponent, DrawerComponent], template: `

Dynamic backdrop

Static backdrop

Alert drawer

`, }) export class DrawerBehaviorExampleComponent { protected readonly dynamicVisible = model(false); protected readonly staticVisible = model(false); protected readonly alertVisible = model(false); protected readonly closeDynamicAction = signal({ label: 'Done', variant: 'primary', action: () => this.dynamicVisible.set(false), }); protected readonly closeStaticAction = signal({ label: 'Done', variant: 'primary', action: () => this.staticVisible.set(false), }); protected readonly resolveAlertAction = signal({ label: 'Review now', variant: 'primary', action: () => this.alertVisible.set(false), }); protected readonly dismissAlertAction = signal({ label: 'Defer', variant: 'secondary', action: () => this.alertVisible.set(false), }); } ``` ## Footer actions ```ts import { Component, model, signal } from '@angular/core'; import { ButtonComponent, DrawerComponent, QuickAction } from 'ui'; @Component({ selector: 'app-drawer-actions-example', standalone: true, imports: [ButtonComponent, DrawerComponent], template: `

Open actions drawer

Last action: {{ lastAction() || 'none' }}

`, }) export class DrawerActionsExampleComponent { protected readonly visible = model(false); protected readonly lastAction = signal(''); protected readonly primaryAction = signal({ label: 'Publish', variant: 'primary', action: () => { this.lastAction.set('Publish'); this.visible.set(false); }, }); protected readonly secondaryAction = signal({ label: 'Cancel', variant: 'secondary', action: () => { this.lastAction.set('Cancel'); this.visible.set(false); }, }); protected readonly additionalActions = signal([ { label: 'Preview', variant: 'secondary', appearance: 'outline', action: () => this.lastAction.set('Preview'), }, { label: 'Duplicate', variant: 'secondary', appearance: 'subtle', action: () => this.lastAction.set('Duplicate'), }, ]); } ``` ## Task panel pattern ```ts import { Component, model, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent, DrawerComponent, QuickAction, SwitchComponent, TextComponent } from 'ui'; @Component({ selector: 'app-drawer-settings-panel-example', standalone: true, imports: [FormsModule, ButtonComponent, DrawerComponent, SwitchComponent, TextComponent], template: `

Open settings panel

Current label: {{ currentLabel() }}

`, }) export class DrawerSettingsPanelExampleComponent { protected readonly visible = model(false); protected readonly currentLabel = signal('Weekly renewal digest'); protected draftLabel = 'Weekly renewal digest'; protected notifyOwners = true; protected pauseOnFailure = false; protected readonly saveAction = signal({ label: 'Save settings', variant: 'primary', action: () => { const next = this.draftLabel.trim(); this.currentLabel.set(next || this.currentLabel()); this.visible.set(false); }, }); protected readonly cancelAction = signal({ label: 'Cancel', variant: 'secondary', action: () => { this.draftLabel = this.currentLabel(); this.visible.set(false); }, }); } ``` ## Accessibility ### Role and modality Overlay drawers render with `role="dialog"`; inline drawers render as `role="region"`. Modal overlays also expose `aria-modal` so assistive technologies understand that focus is constrained. | Mode | Accessibility behavior | | --- | --- | | overlay modal | `role="dialog"` with constrained focus | | overlay non-modal | dialog semantics without full interruption | | inline | `role="region"` inside page flow | | alert | strongest interruption; avoid for routine tasks | ### Accessible title When `title` is present, the drawer is linked through `aria-labelledby` to the visible heading. Give the title enough context that users immediately understand the panel purpose. ### Focus and dismissal Modal overlay drawers trap focus while open. `Escape` and backdrop dismissal depend on `closable`, `backdrop`, and `modalType`; `alert` mode disables backdrop and Escape dismissal. | Key | Action | | --- | --- | | `Tab` / `Shift+Tab` | moves through interactive drawer content | | `Escape` | closes dismissible overlay drawers | | `Enter` / `Space` | activates focused controls inside the drawer |