Angular Action Sheet | ng-hub-ui-action-sheet
Angular action sheet opened from a service: actions with roles, grouped or flat, handlers that can refuse to close, and dismissal by backdrop, keyboard or a drag of the sheet.
Last updated Sep 21, 2026
Overview
Why teams search for this library
Use ng-hub-ui-action-sheet when a row or a toolbar button has to offer a few actions over the current screen, without a menu component sitting in the page for a sheet nobody has opened yet.
Install
npm install ng-hub-ui-action-sheetJump to
Ideal for
About action-sheet
ng-hub-ui-action-sheet is a standalone Angular library that opens a sheet from a service and resolves once with what the reader chose. Actions carry a role: `cancel` is set apart at the end wherever it was declared, and `destructive` wears the danger colour. They can be listed flat or under group titles, and a handler can refuse to close, so a confirmation runs before the sheet goes away. There are three ways out — the backdrop, `Escape` and a drag of the sheet downwards — each reporting its own role and each running the cancel action's handler first. The sheet is a `role="dialog"` with `aria-modal`, named by its header, and focus moves into it on open.
Feature guides
Opening a sheet
The sheet is opened from a service and answers once, so nothing about it sits in the page while it is closed.
Examples:
Opening a sheet
A header, three actions and a way out; the call resolves with the choice.
Code
Import:
Template:
Component:
Roles and handlers
A role decides where an action sits and how it reads; a handler decides whether the sheet may close at all.
Examples:
Roles and a handler that refuses
The destructive action fails the first time and keeps the sheet open.
Code
Import:
Template:
Component:
Grouped actions
Blocks with their own titles, for a sheet long enough that a flat list would stop reading as one.
Examples:
Grouped actions
Titled blocks, the current format marked, and one action disabled.
pdfCode
Import:
Template:
Component:
Accent and tokens
One semantic accent for the whole sheet, and a CSS variable for every visual decision under it.
Examples:
Accent and tokens
The same sheet with a semantic accent, and with branded tokens.
The accent colours the selected action; the branded sheet also changes its radius, its touch targets and the width it is allowed to take.
Code
Import:
Template:
Component:
Key features
Recent changes
Version 22.3.0 - 9/21/26, 12:00 AM
added: The sheet animates out, which the animation option already promised. Only the entry had keyframes, so the sheet vanished the instant it settled. The closing pass replays the same keyframes in reverse and the view is destroyed once they finish; with the option off or reduced motion asked for, it leaves at once as before.
Version 22.2.2 - 9/20/26, 12:00 AM
changed: The npm keywords name what the package does — sheet, dialog, menu, overlay, focus-trap, swipe-to-close, accessibility — instead of stopping at the generic ones. Keywords are what npm ranks a search on. Metadata only: no code, types or styles change.
Version 22.2.1 - 9/16/26, 12:00 AM
changed: Repository, issue and README links follow the move to the hub-env organization. Issues for every Hub UI package are now gathered in hub-env/hub-ui, and the repository and bugs fields of the manifest point at the new addresses. No code, types or styles change.
Version 22.2.0 - 9/8/26, 12:00 AM
deprecated: `HubActionSheetComponent` is announced for removal in 23.0.0. The entry point exported it while this page said the library has no template API; the page was the true half. The class cannot be used from a template — `sheetRef` demands a `HubActionSheetRef` whose closing half is `@internal` and wired by `HubActionSheet.open()`, so a hand-mounted sheet resolves its promise and then stays on screen behind a fixed backdrop that traps `Tab` across the document. Nothing changes at runtime; this release is the notice. See `BREAKING_CHANGES.md`.
changed: `public-api.ts` lists the component by name instead of re-exporting its whole file, so the symbol on its way out is named where it is exported. `HubResolvedActionSheetOptions` is unaffected and stays exported.
Version 22.1.0 - 9/7/26, 12:00 AM
fixed: A `:root` in the application now reaches the sheet. The `--hub-action-sheet-*` defaults were declared in a `:root, :host` block, and the encapsulation shim turns the `:root` half into a selector nothing matches — so what survived declared every token straight on the `<hub-action-sheet>` element, and a declaration on an element beats an inherited value whatever its specificity. Every `:root` an application wrote for this library was dead, `!important` included. Each token is now read where it is painted, `var(--hub-action-sheet-x, <default>)`, with the same component → design-system → literal chain as before. See `BREAKING_CHANGES.md`: a `:root` block that never did anything starts doing it.
fixed: A `panelClass` that re-bases `--hub-action-sheet-accent` now recolours the selected action. The accent roles were derived on the host, above the element the class lands on, so the derived value was already fixed by the time the branded class changed the slot. They are derived where the colour is painted, so `:root`, `panelClass` and `variant` all recompute the selection.
changed: `--hub-action-sheet-accent-emphasis` is declared on the sheet element rather than on the host. Nothing in the component paints with it — it is the accent family's third role, there for a consumer dressing the sheet — and declaring it beside the accent means a `panelClass` re-basing the slot recomputes it.
changed: The two READMEs and `docs/css-variables-reference.md` say why both entry points work. Setting a token on `:root` and setting it through `panelClass` were documented side by side without saying which wins, and one of the two did not work at all.
Version 22.0.2 - 9/6/26, 12:00 AM
added: `FUNCTIONALITIES.md`, the map every other library in the family already had, so a reader can tell a feature that only lives in a code snippet from one a live example demonstrates.
changed: The configuration surface the package exports is written down: `HUB_ACTION_SHEET_CONFIG`, `HUB_ACTION_SHEET_DEFAULTS` and the `HubActionSheetConfig` interface, whose `variant` and `panelClass` settle an application's accent and sheet class once. Until now the only way to find any of it was to read the sources.
changed: `HubActionSheetRef.settled` is listed in the API tables. It is public and both READMEs already documented it, but the page a reader looks at first did not.
changed: The page's changelog is the released one. It stopped at `22.0.0`, dated before the published `22.0.1`, and its `22.0.0` entry left out `provideHubActionSheet()` and the CSS variable theming the release notes list; a changelog that lags the registry teaches the reader not to trust it.
changed: Both READMEs describe a library on the stable line rather than one in its early stages, and list the family that exists today. The Spanish one also dropped its note announcing documentation pages that have been live for a week, since two READMEs that disagree are worse than one that is merely terse.
fixed: `docs/css-variables-reference.md` gave `--hub-ref-space-1` a default of `0.5rem`, twice the `0.25rem` both readings of the token actually fall back to, so anyone sizing their own scale from that table was working from the wrong number. The two design-system tokens it omitted, `--hub-sys-color-surface-subtle` and `--hub-sys-color-ink`, are listed as well.
fixed: The hover background of an action falls back to `#f8f9fa`, the value it is declared with, instead of an `rgba(0, 0, 0, 0.05)` literal that could never be reached and contradicted the documented default.
fixed: The action with the `selected` role announces itself with `aria-current="true"` instead of `aria-checked`, which is not defined for a plain button and left the state visible only to readers who could see the sheet.
Version 22.0.1 - 9/1/26, 12:00 AM
changed: The `homepage` in the package manifest points at this library's own documentation page rather than at the site root. Metadata only — nothing a consumer imports is affected.
Version 22.0.0 - 8/30/26, 12:00 AM
added: `HubActionSheet.open()` returns a `HubActionSheetRef` whose `result` resolves once, with the role and data of the chosen action or with how the sheet was dismissed.
added: Actions with roles: `cancel` is set apart at the end wherever it was declared, `destructive` reads in the danger colour, `selected` is marked, and a handler returning `false` keeps the sheet open.
added: Grouped actions with an optional title per block, plus header and sub-header.
added: Dismissal by backdrop, `Escape` and by dragging the sheet down, each reporting its own role and running the cancel action first.
added: `role="dialog"` with `aria-modal`, focus moved in on open, trapped while the sheet lives and returned to the opener on close.
added: `provideHubActionSheet()` sets the defaults every sheet starts from — the four behaviour flags plus `variant` and `panelClass` — overridable per call.
added: CSS variable theming through the `--hub-action-sheet-*` tokens, with the semantic accent on the single-slot contract the rest of the family uses (`variant`), and motion that steps aside under `prefers-reduced-motion`.
removed: The placeholder `ActionSheet` component (selector `lib-action-sheet`) that the pre-release package shipped.
Related libraries
Frequently asked questions
How do I open an action sheet in Angular?
Inject HubActionSheet and call open() with a header and a list of buttons. Nothing goes in your template: the service mounts the sheet on document.body itself and hands back a HubActionSheetRef whose result is a promise resolving to the role and data of whatever the user chose. The hub-action-sheet component is still exported, but it is deprecated and goes away in 23.0.0, because mounted by hand it resolves its promise and then stays on screen.
How do I define the buttons of an action sheet?
As plain data, not as projected content: buttons takes an array of objects with text, role, icon, disabled, data, cssClass and handler, and you can nest them in groups to draw separators. A button with role cancel is lifted out of wherever you declared it and rendered in its own footer block, and role destructive styles the dangerous one. A handler that returns false vetoes the close, which is how you keep the sheet open after a failed action. icon is a CSS class string on an empty element, so the icon font is yours to supply.
How is the action sheet dismissed?
Three ways, each of which can be switched off: a click on the backdrop through backdropDismiss, the Escape key through keyboard, and a downward drag on the grip through swipeToClose, which closes once the drag passes 64 pixels or a quarter of the sheet height. Choosing an action closes it too, and ref.dismiss() closes it from your own code. provideHubActionSheet() sets those defaults for the whole application, and a cancel button's handler runs on every dismissal, so one piece of cleanup covers all the exits.
Does the action sheet become a popover or a dialog on desktop?
No. There is not a single breakpoint in its stylesheet: on a wide screen you get the same sheet anchored to the bottom, capped at 34rem and centred horizontally. If you want a menu anchored to the button that opened it, this is the wrong component. Two more things worth knowing before you reach for it: open() touches document straight away, so it has to run in the browser and not during server rendering, and the sheet traps Tab but does not make the page behind it inert, so a screen reader can still wander into it.