Component
Drawer
A panel that slides in from any edge. It carries a title, description, icon, content, and OK/Cancel footer, and on the bottom edge it can be dragged between snap points.
Basic
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HbButtonComponent, HbDrawerImports } from '@herbst/ui';
@Component({
selector: 'hb-demo-drawer-basic',
imports: [HbDrawerImports, HbButtonComponent],
template: `
<hb-drawer
hbTitle="Save photo"
hbDescription="Review the details before adding it to the Herbst album."
hbOkText="Save"
>
<button hb-button hbType="outline" hbDrawerTrigger>Open drawer</button>
<div hbDrawerContent class="text-sm leading-relaxed text-muted-foreground">
Oak leaves along the river — Freiburg, taken Nov 3, 2026.
</div>
</hb-drawer>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoDrawerBasicComponent {}
Sides & sizes
Handle & snap points
Confirm & events
No action yet.
API reference
hb-drawer — layout
| Property | Description | Type | Default |
|---|---|---|---|
| [hbSide] | Edge the drawer slides from. | 'top' | 'bottom' | 'left' | 'right' | 'bottom' |
| [hbSize] | Panel size; auto fits the content, full covers the axis. | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto' | 'full' | 'auto' |
| [hbFullScreen] | Expand the panel to the whole screen. | boolean | false |
| [hbHandle] / [hbHandleOnly] | Show a drag handle, and restrict dragging to it. | boolean | true / false |
| [hbSnapPoints] / [(hbActiveSnapPoint)] | Fractions of the screen the drawer snaps to, and the active one. | number[] / number | [] / undefined |
| [hbScaleBackground] / [hbBlockScroll] / [hbBreakpoint] | Scale the page behind, block body scroll, and the desktop breakpoint. | boolean / number | false / true / 768 |
hb-drawer — header & footer
| Property | Description | Type | Default |
|---|---|---|---|
| [hbTitle] / [hbDescription] / [hbIcon] | Header heading, supporting text, and leading icon. | string | '' |
| [hbOkText] / [hbCancelText] | Footer button labels; empty hides the button. | string | 'OK' / 'Cancel' |
| [hbOkType] | Visual style of the confirm button. | 'default' | 'destructive' | 'warning' | 'success' | 'default' |
| [hbOkIcon] / [hbCancelIcon] / [hbOkDisabled] / [hbCancelDisabled] | Footer button icons and disabled states. | string / boolean | '' / false |
| [hbFooterAlign] / [hbShowFooter] | Alignment of the footer buttons, and whether to show it. | 'start' | 'center' | 'end' | 'between' / boolean | 'end' / true |
| [hbClosable] / [hbShowClose] | Allow closing by backdrop/escape, and show the close button. | boolean | true |
hb-drawer — data, state & slots
| Property | Description | Type | Default |
|---|---|---|---|
| [hbData] / [hbOpen] | Payload echoed in events, and a controlled open state. | object | boolean | undefined |
| (hbOk) / (hbCancel) / (hbOpenChange) | Emit on confirm (with hbData), cancel, and open/close. | object | boolean | — |
| [hbDrawerTrigger] / [hbDrawerContent] / [hbDrawerFooter] | Projected trigger, body content, and custom footer. | slot | — |