Home / Components / Alert Choose tone for semantic intent and variant for the surface. Project the message into the body and put actions in neu-alert-actions. closable adds a close button; closing hides this alert instance and emits closed once. Recreate the instance to show a new message. icon resolves an application icon; the built-in tone icons need no provider.
Try the interaction and open Code for the implementation. Reset restores the initial state.
Demo Source
✓ Changes saved Your profile is up to date.
! Review your settings Confirm the notification preferences.
Confirm
Waiting for confirmation.
Change the options and inspect the preview and generated template. Code contains the full executable source.
Demo Source
Live preview i Account update Your preferences have been saved.
closed events: 0
Show alert again Generated template: reflects the options above. Open Code for the complete imports and state.
<neu-alert
tone="info"
variant="soft"
title="Account update"
[showIcon]="true"
[closable]="false"
closeLabel="Close alert"
(closed)="onClosed()"
>
Your preferences have been saved.
</neu-alert>Inputs configure the alert. closed is a notification that this instance has been dismissed, not a two-way visibility model. Actions projected by the application own their event handlers.
danger uses an assertive alert; other tones use a polite status. Reserve urgent announcements for messages requiring immediate attention. Give the close button a meaningful closeLabel. Projected buttons remain keyboard accessible.
Tab Reach the close button when available and any projected controls. Enter Close the alert from its focused close button, or activate a focused projected button. Space Close the alert from its focused close button, or activate a focused projected button.
Inputs and Outputs are extracted from the pinned package. Named types link to their definitions; Templates list only supported projection areas.
Inputs Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.
closablebooleanfalse[closable]Show the native close button. closeLabelstring'Close alert'[closeLabel]Accessible name of the close button. iconstring | nullnull[icon]Application icon key; null uses the built-in tone icon. showIconbooleantrue[showIcon]Show or hide the decorative icon. titlestring''[title]Optional visible title above projected content. toneNeuAlertTone 'info'[tone]info, success, warning or danger; danger announces an urgent alert. variantNeuAlertVariant 'soft'[variant]soft background or outline surface.
Outputs Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.
closedvoid(closed)="onClosed($event)"Emits once when this alert instance is dismissed.
Templates ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.
*Message body
View example Content projectionProject text, emphasis or structured HTML into the message.
<ng-content />Context used: —
[neu-alert-actions]Message actions
View example Content projectionApplication buttons handle their own actions.
<ng-content select="[neu-alert-actions]" />Context used: —
Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.
Message content *
Demo Source
i Before you continue Use projected HTML to add meaningful emphasis and structure.
Projected actions [neu-alert-actions]
Demo Source
i Optional notifications Choose whether to receive updates.
Enable Not now
Disabled
Public Types Open a type to inspect its definition and interface fields.
import type { NeuAlertTone } from '@neural-ui/core/alert';
// Public declaration (reference only)
export type NeuAlertTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger';import type { NeuAlertVariant } from '@neural-ui/core/alert';
// Public declaration (reference only)
export type NeuAlertVariant = 'soft' | 'outline';Use the public component Inputs and Core surface, text, spacing and semantic color tokens. Keep content responsive and verify both themes.
Specific tokens --neu-alert-error-bg Inherited theme value used by this component Field surface var(--neu-error-bg)Root declaration --neu-error-bg--neu-alert-error-border Inherited theme value used by this component Field surface rgba(239, 68, 68, 0.2)Root declaration No token alias--neu-alert-error-text Inherited theme value used by this component Field surface var(--neu-error-text)Root declaration --neu-error-text--neu-alert-info-bg Inherited theme value used by this component Field surface var(--neu-info-bg)Root declaration --neu-info-bg--neu-alert-info-border Inherited theme value used by this component Field surface rgba(0, 122, 255, 0.2)Root declaration No token alias--neu-alert-info-text Inherited theme value used by this component Field surface var(--neu-info-text)Root declaration --neu-info-text--neu-alert-success-bg Inherited theme value used by this component Field surface var(--neu-success-bg)Root declaration --neu-success-bg--neu-alert-success-border Inherited theme value used by this component Field surface rgba(16, 185, 129, 0.2)Root declaration No token alias--neu-alert-success-text Inherited theme value used by this component Field surface var(--neu-success-text)Root declaration --neu-success-text--neu-alert-warning-bg Inherited theme value used by this component Field surface var(--neu-warning-bg)Root declaration --neu-warning-bg--neu-alert-warning-border Inherited theme value used by this component Field surface rgba(245, 158, 11, 0.2)Root declaration No token alias--neu-alert-warning-text Inherited theme value used by this component Field surface var(--neu-warning-text)Root declaration --neu-warning-text
Shared tokens used Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.
--neu-radius Control corner radius Shared by other Core consumers; scope the override. 8px
Sidebar Next Badge 