CngxBannerOutlet
projects/ui/feedback/banner/banner-outlet.ts
Import#
import { CngxBannerOutlet } from '@cngx/ui/feedback'
Description#
Banner outlet - renders the global banner stack at the top of the page.
Place once in the app shell, above <router-outlet>.
Requires provideFeedback(withBanners()).
Banners present at first render appear without animation to avoid layout jump on page load.
<cngx-banner-outlet />
<router-outlet />Metadata#
Dependencies#
Relationships
Default visuals for CngxBannerOutlet. The host carries
.cngx-banner-outlet and is sticky-top with z-index: 900 so it
sits below modal surfaces but above page content; empty outlets
collapse. Each banner renders as .cngx-banner with __icon,
__body, __message, __error, __action, and __dismiss
children. Uses its own --cngx-banner-* namespace (not shared
with --cngx-alert-*) so banners can be themed independently
even though the severity-tint palette is visually identical.
State modifiers
--animate- 200ms enter slide-down (off underprefers-reduced-motion)--pending- opacity dim +pointer-events: none
Variants
Severity classes pin four tokens each (bg / border / icon / accent):
--info- info palette--success- success palette--warning- warning palette--error- error palette
Slots
.cngx-banner__icon- severity glyph.cngx-banner__default-icon- SVG fallback when no custom icon is projected.cngx-banner__message- body copy.cngx-banner__error- inline-error sub-line; color delegates to--cngx-color-danger.cngx-banner__action- projected action button tinted by--cngx-banner-accent(padding-based hit-target, no min-size floor so the button does not stand taller than the banner).cngx-banner__dismiss- dismiss control
Inheritance
--cngx-banner-error-color->--cngx-color-danger
Dark mode
Three hooks swap every severity triplet plus the action-hover overlay (alpha-on-black flips to alpha-on-white):
prefers-color-scheme: dark[data-color-scheme="dark"].darkclass
Pair with
@cngx/themes/material/feedback-theme- Material 3 surface palette shared withCngxAlertandCngxAlertStack
Index#
Surface
State / Action
State / Pending
Layout
<number>900Stacking-context order - sticky-top banner sits below modal surfaces but above page content.
<length>20pxDefault icon size when no custom icon is projected.
Surface
<color>oklch(0.98 0.005 250)Background - neutral by default; severity rules override.
<color>transparentBorder color - neutral by default; severity rules override.
*currentColorIcon color override - defaults to currentColor and is pinned
by each severity rule.
*currentColorAccent color used by the action button border / foreground. Pinned by each severity rule.
Motion
*100%Vertical offset the banner translates from while entering.
Variant / Info
<color>oklch(0.96 0.025 250)Background tint of the info severity.
<color>oklch(0.85 0.07 250)Border color of the info severity.
Variant / Success
<color>oklch(0.96 0.04 145)Background tint of the success severity.
<color>oklch(0.85 0.1 145)Border color of the success severity.
<color>oklch(0.65 0.15 145)Icon color of the success severity.
Variant / Warning
<color>oklch(0.97 0.04 80)Background tint of the warning severity.
<color>oklch(0.86 0.1 80)Border color of the warning severity.
<color>oklch(0.72 0.18 70)Icon color of the warning severity.
Variant / Error
<color>oklch(0.96 0.025 25)Background tint of the error severity.
<color>oklch(0.85 0.08 25)Border color of the error severity.
Typography
State / Error
<color>oklch(0.62 0.22 25)Text color of the inline-error sub-line. Falls back to
--cngx-color-danger.
State / Action
<length>44pxMinimum hit-target size of the action button (≥ 44 px).
<color>oklch(0 0 0 / 0.04)Background tint applied on hover of the action button.
State / Pending
<number>0.85Opacity multiplier applied while the banner is pending.