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

PropertyDescriptionTypeDefault
[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

PropertyDescriptionTypeDefault
[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

PropertyDescriptionTypeDefault
[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