Angular Toast Notification Service | ng-hub-ui-toast
Standalone Angular toast notification service with Signals, lifecycle observables, progress bar, six positions and full CSS variable theming.
API reference
Here's the full contract for toast: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.
Inputs
No inputs documented yet.
Outputs
No outputs documented yet.
Templates
No templates documented yet.
CSS variables
Theme every pixel with 15 CSS variables. Override them at :root or scope them to a wrapper.
Layout & Spacing
Tokens that control the toast's size, border radius, padding and shadow.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-toast-width | 22rem | length | Maximum width of each toast card. 18rem26rem |
--hub-toast-border-radius | 0.375rem | length | Corner radius of the toast card. 00.75rem |
--hub-toast-padding-x | 1rem | length | Horizontal padding inside the toast body. 0.75rem1.25rem |
--hub-toast-padding-y | 0.75rem | length | Vertical padding inside the toast body. 0.5rem1rem |
--hub-toast-gap | 0.5rem | length | Gap between stacked toasts in the container. 0.25rem0.75rem |
--hub-toast-shadow | 0 2px 8px rgba(0,0,0,.25) | shadow | Box shadow cast by the toast card. none0 4px 20px rgba(0,0,0,.18) |
Colors
Background, foreground and accent tokens. Built-in types override the accent from --hub-sys-color-<type>-*.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-toast-bg | #323232 | color | Toast card background colour. #fffvar(--bs-dark) |
--hub-toast-color | #ffffff | color | Toast body text colour. #212529var(--bs-body-color) |
--hub-toast-title-color | inherit | color | Toast heading text colour. #fffvar(--bs-emphasis-color) |
--hub-toast-accent | transparent | color | Left-border or highlight colour; set automatically from the DS token family for built-in types. var(--hub-sys-color-primary)#0d6efd |
Progress Bar
Tokens for the countdown bar rendered at the bottom of the toast.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-toast-progress-height | 4px | length | Height of the progress bar strip. 2px6px |
--hub-toast-progress-bg | rgba(255,255,255,.4) | color | Background colour of the progress bar fill. rgba(0,0,0,.2)var(--bs-primary) |
Container
Tokens for the fixed overlay container that holds all visible toasts.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-toast-container-gap | 0.5rem | length | Vertical gap between consecutive toasts in the container. 0.25rem1rem |
--hub-toast-container-offset | 1rem | length | Distance from the screen edge to the container. 0.5rem2rem |
--hub-toast-zindex | 1090 | number | Stack order of the toast container relative to other overlays. 10509999 |
Styling and theming
No styling examples are documented yet. This section will include customization recipes and theming examples.