CngxAlert
projects/ui/feedback/alert/alert.ts
Import#
import { CngxAlert } from '@cngx/ui/feedback'
Description#
Inline alert atom with enter/exit animations, state-driven visibility, auto-dismiss with pause-on-hover/focus, and optional auto-collapse.
Three visibility modes:
- Static (no
[state]or[when]): always visible - State-driven (
[state]): auto-shows on error/success/loading, auto-hides on idle - Boolean-driven (
[when]): visible when true, hidden when false
[state] takes precedence over [when].
Metadata#
Host#
Relationships
Index#
Outputs
HostBindings
HostListeners
Inputs#
number | undefinedAuto-dismiss delay in ms for success state or timed alerts.
Set to undefined to disable auto-dismiss (persistent).
5000number | undefinedDelay in ms before auto-collapsing. Defaults to autoDismissDelay.
Enables auto-collapse after collapseDelay. Visual only - SR reads full content.
falseAlertSeverityAlert severity - determines visual style, default icon, and ARIA role.
'info'Bind an async state - auto-shows on error/success/loading, auto-hides on idle.
boolean | undefinedBoolean visibility trigger. When set, controls alert visibility directly.
[state] takes precedence over [when].
Outputs#
HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-alert--info] | severity() === "info" |
[class.cngx-alert--success] | severity() === "success" |
[class.cngx-alert--warning] | severity() === "warning" |
[class.cngx-alert--error] | severity() === "error" |
[class.cngx-alert--hidden] | visibilityPhase() === "hidden" |
[class.cngx-alert--entering] | visibilityPhase() === "entering" |
[class.cngx-alert--visible] | visibilityPhase() === "visible" |
[class.cngx-alert--exiting] | visibilityPhase() === "exiting" |
[class.cngx-alert--collapsed] | collapsed() |
[attr.role] | isVisible() ? ariaRole() : null |
[attr.aria-atomic] | isVisible() ? ariaAtomic() : null |
[attr.aria-label] | isVisible() ? (title() || null) : null |
[attr.aria-expanded] | collapsible() ? !collapsed() : null |
[attr.aria-busy] | isStateBusy() || null |
[attr.hidden] | !isVisible() || null |
HostListeners#
| Event | Handler |
|---|---|
(animationend) | animationend() |
(pointerenter) | pointerenter() |
(pointerleave) | pointerleave() |
(focusin) | focusin() |
(focusout) | focusout() |
Default visuals for CngxAlert. The host carries .cngx-alert
and renders __icon, __body, __title, __collapsible,
__actions, __action, and __dismiss children. Severity
tokens use a tinted-surface family (--cngx-alert-{severity}-bg / border / icon) visually distinct from --cngx-color-{success / danger / warning / info} which are solid brand colors unsuitable
for alert surfaces - brand-wide overrides target the severity
tokens directly.
State modifiers
--collapsed- grid-row1fr -> 0frcollapses the body slot; the host becomes clickable and tints on hover via--cngx-alert-collapsed-hover-bg--hidden-display: none--entering- 200ms enter animation + 300ms icon pulse--exiting- 150ms exit animation
All animations short-circuit under prefers-reduced-motion.
Variants
Severity classes pin three tokens each:
--info- info bg / border / icon--success- success bg / border / icon--warning- warning bg / border / icon--error- error bg / border / icon
Slots
.cngx-alert__icon- severity glyph; color follows--cngx-alert-icon-color.cngx-alert__default-icon- SVG fallback when no custom icon is projected.cngx-alert__title- bold header.cngx-alert__collapsible- grid-rows body that collapses on--collapsed.cngx-alert__actions- trailing action row, hidden when empty.cngx-alert__action- projected[cngxAlertAction]button tinted by--cngx-alert-icon-color.cngx-alert__dismiss- dismiss control
Dark mode
Three hooks swap every severity triplet plus the collapsed-hover and action-hover overlays (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
Index#
Layout
Typography
Motion
State / Collapsed
Layout
<length>20pxDefault icon size when no custom icon is projected.
Surface
<color>transparentBorder color - neutral by default; severity rules override.
<color>oklch(0.98 0.005 250)Background - neutral by default; severity rules override.
*currentColorIcon color override - defaults to currentColor and is pinned
by each severity rule.
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
Motion
<time>200msDuration of the collapsed-state grid-row transition.
<time>300msDuration of the icon-pulse animation that fires on enter.
<length>8pxVertical offset the alert translates from while entering.
<length>8pxVertical offset the alert translates to while exiting.
State / Collapsed
<color>oklch(0 0 0 / 0.02)Background tint applied on hover of a collapsed alert.
State / Action
<color>transparentBackground of the projected action button. Defaults to transparent so the severity tint shows through; consumers can pin a filled accent.
*4px 10pxPadding shorthand of the projected action button.
*0.875remFont-size of the projected action button label.
<number>600Font-weight of the projected action button label.
<color>oklch(0 0 0 / 0.04)Background tint applied on hover of the projected action button.