Alert | Neural Native

Import

component.ts

import { NeuAlertComponent } from '@neural-ui/native/alert';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Dismissible feedback

Explore warning and success alerts around a personal draft. The switch changes only the connection preview; editing the draft, dismissing the success alert and restoring it are independent local actions. Nothing is sent or persisted to a server.

View and copy the complete example

dismissible-feedback.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuAlertComponent } from '@neural-ui/native/alert';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuInputComponent, NeuSwitchComponent, NeuAlertComponent, NeuAvatarComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Keep the next step clear</text><text class="product-caption">Feedback that helps you carry on</text></view>
    <view class="note-cover"><text class="note-kicker">NEURAL NOTES / 07</text><text class="note-title">A good idea, kept close.</text><view class="product-row"><neu-avatar label="Ada Lovelace" size="sm" /><view class="product-copy"><text class="note-author">Ada Lovelace</text><text class="note-caption">Personal draft · On this screen</text></view></view></view>
    <view class="product-section"><text class="note-section-label">CONNECTION PREVIEW</text><neu-switch label="Simulate offline mode" [(checked)]="offline" />
    <neu-alert [title]="offline() ? 'Offline preview' : 'Connection available'" [message]="offline() ? 'Your draft stays here while you explore the warning state.' : 'Success preview. Keep editing your local draft.'" [tone]="offline() ? 'warning' : 'success'" [closable]="!offline()" closeLabel="Dismiss confirmation" [visible]="offline() || visible()" (visibleChange)="visible.set($event)" /></view>
    <view class="note-editor"><text class="note-section-label">WORK IN PROGRESS</text><neu-input label="Draft note" [(value)]="note" /><text class="product-caption">A place for the next detail you do not want to lose.</text></view><view class="product-actions"><neu-button label="Show confirmation" size="sm" variant="outline" [disabled]="offline()" (pressed)="visible.set(true)" /></view><text class="product-caption">This preview does not change your connection or save to a server.</text></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.note-cover { gap: 18px; padding: 22px; border-radius: 20px; background-color: #def0e9; --neu-text: #173f36; --neu-muted: #45675d; }
.note-kicker { color: #45675d; font-size: 10px; line-height: 16px; letter-spacing: 1px; font-weight: 600; }
.note-title { color: #173f36; font-size: 30px; line-height: 36px; font-weight: 600; }
.note-author { color: #173f36; font-size: 13px; line-height: 19px; font-weight: 600; }
.note-caption { color: #45675d; font-size: 11px; line-height: 17px; }
.note-section-label { color: var(--neu-muted, #596477); font-size: 10px; line-height: 16px; letter-spacing: 1px; font-weight: 600; }
.note-editor { gap: 14px; padding: 18px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
  `,
})
export class ExampleComponent {
  readonly offline = signal(false);
  readonly visible = signal(true);
  readonly note = signal('Review the welcome screen with the team.');
}

Semantic colors

Compare the six semantic colors supplied by the theme.

View and copy the complete example

semantic-colors.component.ts

import { Component } from '@angular/core';
import { NeuAlertComponent } from '@neural-ui/native/alert';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuAlertComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <neu-alert title="Workspace update" message="A new version is ready." tone="brand" />
    <neu-alert title="Draft saved" message="Only you can see this draft." tone="neutral" />
    <neu-alert title="Connected" message="Your changes are synchronized." tone="success" />
    <neu-alert title="Shared workspace" message="Invite your team when you are ready." tone="info" />
    <neu-alert title="Storage nearly full" message="Review older attachments to free space." tone="warning" />
    <neu-alert title="Upload failed" message="Check your connection and try again." tone="danger" />
    </view>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {

}

Outline and text only

Compare an outline alert with an informational message without an icon.

View and copy the complete example

outline-and-text-only.component.ts

import { Component } from '@angular/core';
import { NeuAlertComponent } from '@neural-ui/native/alert';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuAlertComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <neu-alert title="Action required" message="Update the payment method." tone="danger" variant="outline" />
    <neu-alert message="Your draft is available offline." tone="info" variant="outline" [showIcon]="false" />
    </view>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {

}

Supporting action

Project a compact action below the alert message. Its event belongs to your application.

View and copy the complete example

projected-action.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuAlertComponent } from '@neural-ui/native/alert';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuAlertComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-alert title="Changes saved locally" message="Reconnect to synchronize your workspace." tone="warning">
      <neu-button label="View offline changes" size="sm" variant="text" tone="neutral" (pressed)="requested.set(true)" />
    </neu-alert>
    <text class="usage-caption" accessibilityLiveRegion="polite">{{ requested() ? 'Offline changes requested' : 'Your changes stay on this device' }}</text>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly requested = signal(false);
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Alert · android · native capture — **Android**Native screenshot

Alert · ios · native capture — **iOS**Native screenshot

Personalization

Projected content

After the message, inside the alert text column. Add a supporting link or a compact action; title, message and dismissal remain controlled by Alert.

Use native elements from @ng-native/components and public Neural Native controls. Angular styles belong to the component that declares this content.

API reference

Inputs

Name	Type	Default	Binding	Description
title	string	''	Input	Heading for the surface, section or presentation.
tone	NeuTone	'info'	Input	Semantic color: neutral, brand, success, info, warning or danger. The accent value remains a compatible alias for brand. Colors use NeuTheme tokens; explain statuses with words as well as color.
variant	NeuAlertVariant	'soft'	Input	The soft variant uses a subtle tinted surface; outline uses a transparent surface with the semantic border. Both retain the selected tone.
showIcon	boolean	true	Input	Show the semantic status icon. The svg input overrides the default icon without changing the tone.
svg	string	''	Input	SVG source string for the icon. The currentColor value lets the native renderer apply the theme color.
message	string	Required	Input	Message shown to explain a status, notification or decision.
closable	boolean	false	Input	Displays a close action for the current message or surface.
closeLabel	string	'Close'	Input	Text or accessible name used for close. It does not perform the action by itself.

Models

Name	Type	Default	Binding	Description
visible	boolean	true	Model · two-way	Current visibility of the image viewer. Bind a writable signal with [(visible)].

Outputs

Name	Payload	When it emits
visibleChange	boolean	Emits the updated visible value. [(visible)] binds this output together with its model input.
closed	void	Reports a close request; inspect the declared payload before sharing handlers across overlays.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

import { signal } from '@angular/core';

// Fields inside your component class
readonly visible = signal<boolean>(true);

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuTone

NeuTone.ts

import type { NeuTone } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';

NeuAlertVariant

NeuAlertVariant.ts

import type { NeuAlertVariant } from '@neural-ui/native/alert';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuAlertVariant = 'soft' | 'outline';