Documentation
Fuse Components
Components

## Alert

fuse-alert is a customizable component for displaying all kinds of alerts across your app. They can be controlled from your components as well as from the `FuseAlertService`.

Exported as: `fuseAlert`

## Module

import { FuseAlertModule } from '@fuse/components/alert';

## Properties

Name | Description | Default
--- | --- | ---
@Input() name: string | A unique name for the alert box to access it from `FuseAlertService`. | `Auto generated`
@Input() appearance: FuseAlertAppearance | Appearance of the alert box. | `soft`
@Input() dismissed: boolean | Whether the alert box is dismissed. | `false`
@Input() dismissible: boolean | Whether the alert box is dismissible. This must be `true` for `dismissed` to work. | `false`
@Input() showIcon: boolean | Whether the icon is shown. | `true`
@Input() type: FuseAlertType | The type of the alert box. | `primary`
@Output() afterDismissed: true | An event emitted after the alert box dismissed. | -
@Output() afterShown: true | An event emitted after the alert box shown. | -

## Type aliases

export type FuseAlertAppearance = | 'border' | 'fill' | 'outline' | 'soft'; export type FuseAlertType = | 'primary' | 'accent' | 'warn' | 'basic' | 'info' | 'success' | 'warning' | 'error';

## Appearance

Alert component comes with 3 different built-in appearances to choose from:

###### Soft (default)

Primary alert Thank you for joining our newsletter Accent alert Your changes has been saved Warn alert Fill all required fields to proceed next step Basic alert You have 3 new notifications Info alert This is a alert with an 'info' level severity Success alert This is a alert with a 'success' level severity Warning alert This is a alert with a 'warning' level severity Error alert This is a alert with an 'error' level severity <!-- Primary --> <fuse-alert [type]="'primary'"> <span fuseAlertTitle>Primary alert</span> Thank you for joining our newsletter </fuse-alert> <!-- Accent --> <fuse-alert [type]="'accent'"> <span fuseAlertTitle>Accent alert</span> Your changes has been saved </fuse-alert> <!-- Warn --> <fuse-alert [type]="'warn'"> <span fuseAlertTitle>Warn alert</span> Fill all required fields to proceed next step </fuse-alert> <!-- Basic --> <fuse-alert [type]="'basic'"> <span fuseAlertTitle>Basic alert</span> You have 3 new notifications </fuse-alert> <!-- Info --> <fuse-alert [type]="'info'"> <span fuseAlertTitle>Info alert</span> This is a alert with an 'info' level severity </fuse-alert> <!-- Success --> <fuse-alert [type]="'success'"> <span fuseAlertTitle>Success alert</span> This is a alert with a 'success' level severity </fuse-alert> <!-- Warning --> <fuse-alert [type]="'warning'"> <span fuseAlertTitle>Warning alert</span> This is a alert with a 'warning' level severity </fuse-alert> <!-- Error --> <fuse-alert [type]="'error'"> <span fuseAlertTitle>Error alert</span> This is a alert with an 'error' level severity </fuse-alert>

###### Outline

Primary alert Thank you for joining our newsletter Accent alert Your changes has been saved Warn alert Fill all required fields to proceed next step Basic alert You have 3 new notifications Info alert This is a alert with an 'info' level severity Success alert This is a alert with a 'success' level severity Warning alert This is a alert with a 'warning' level severity Error alert This is a alert with an 'error' level severity <!-- Primary --> <fuse-alert [type]="'primary'" [appearance]="'outline'"> <span fuseAlertTitle>Primary alert</span> Thank you for joining our newsletter </fuse-alert> <!-- Accent --> <fuse-alert [type]="'accent'" [appearance]="'outline'"> <span fuseAlertTitle>Accent alert</span> Your changes has been saved </fuse-alert> <!-- Warn --> <fuse-alert [type]="'warn'" [appearance]="'outline'"> <span fuseAlertTitle>Warn alert</span> Fill all required fields to proceed next step </fuse-alert> <!-- Basic --> <fuse-alert [type]="'basic'" [appearance]="'outline'"> <span fuseAlertTitle>Basic alert</span> You have 3 new notifications </fuse-alert> <!-- Info --> <fuse-alert [type]="'info'" [appearance]="'outline'"> <span fuseAlertTitle>Info alert</span> This is a alert with an 'info' level severity </fuse-alert> <!-- Success --> <fuse-alert [type]="'success'" [appearance]="'outline'"> <span fuseAlertTitle>Success alert</span> This is a alert with a 'success' level severity </fuse-alert> <!-- Warning --> <fuse-alert [type]="'warning'" [appearance]="'outline'"> <span fuseAlertTitle>Warning alert</span> This is a alert with a 'warning' level severity </fuse-alert> <!-- Error --> <fuse-alert [type]="'error'" [appearance]="'outline'"> <span fuseAlertTitle>Error alert</span> This is a alert with an 'error' level severity </fuse-alert>

###### Fill

Primary alert Thank you for joining our newsletter Accent alert Your changes has been saved Warn alert Fill all required fields to proceed next step Basic alert You have 3 new notifications Info alert This is a alert with an 'info' level severity Success alert This is a alert with a 'success' level severity Warning alert This is a alert with a 'warning' level severity Error alert This is a alert with an 'error' level severity <!-- Primary --> <fuse-alert [type]="'primary'" [appearance]="'fill'"> <span fuseAlertTitle>Primary alert</span> Thank you for joining our newsletter </fuse-alert> <!-- Accent --> <fuse-alert [type]="'accent'" [appearance]="'fill'"> <span fuseAlertTitle>Accent alert</span> Your changes has been saved </fuse-alert> <!-- Warn --> <fuse-alert [type]="'warn'" [appearance]="'fill'"> <span fuseAlertTitle>Warn alert</span> Fill all required fields to proceed next step </fuse-alert> <!-- Basic --> <fuse-alert [type]="'basic'" [appearance]="'fill'"> <span fuseAlertTitle>Basic alert</span> You have 3 new notifications </fuse-alert> <!-- Info --> <fuse-alert [type]="'info'" [appearance]="'fill'"> <span fuseAlertTitle>Info alert</span> This is a alert with an 'info' level severity </fuse-alert> <!-- Success --> <fuse-alert [type]="'success'" [appearance]="'fill'"> <span fuseAlertTitle>Success alert</span> This is a alert with a 'success' level severity </fuse-alert> <!-- Warning --> <fuse-alert [type]="'warning'" [appearance]="'fill'"> <span fuseAlertTitle>Warning alert</span> This is a alert with a 'warning' level severity </fuse-alert> <!-- Error --> <fuse-alert [type]="'error'" [appearance]="'fill'"> <span fuseAlertTitle>Error alert</span> This is a alert with an 'error' level severity </fuse-alert>

###### Border

Primary alert Thank you for joining our newsletter Accent alert Your changes has been saved Warn alert Fill all required fields to proceed next step Basic alert You have 3 new notifications Info alert This is a alert with an 'info' level severity Success alert This is a alert with a 'success' level severity Warning alert This is a alert with a 'warning' level severity Error alert This is a alert with an 'error' level severity <!-- Primary --> <fuse-alert [type]="'primary'" [appearance]="'border'"> <span fuseAlertTitle>Primary alert</span> Thank you for joining our newsletter </fuse-alert> <!-- Accent --> <fuse-alert [type]="'accent'" [appearance]="'border'"> <span fuseAlertTitle>Accent alert</span> Your changes has been saved </fuse-alert> <!-- Warn --> <fuse-alert [type]="'warn'" [appearance]="'border'"> <span fuseAlertTitle>Warn alert</span> Fill all required fields to proceed next step </fuse-alert> <!-- Basic --> <fuse-alert [type]="'basic'" [appearance]="'border'"> <span fuseAlertTitle>Basic alert</span> You have 3 new notifications </fuse-alert> <!-- Info --> <fuse-alert [type]="'info'" [appearance]="'border'"> <span fuseAlertTitle>Info alert</span> This is a alert with an 'info' level severity </fuse-alert> <!-- Success --> <fuse-alert [type]="'success'" [appearance]="'border'"> <span fuseAlertTitle>Success alert</span> This is a alert with a 'success' level severity </fuse-alert> <!-- Warning --> <fuse-alert [type]="'warning'" [appearance]="'border'"> <span fuseAlertTitle>Warning alert</span> This is a alert with a 'warning' level severity </fuse-alert> <!-- Error --> <fuse-alert [type]="'error'" [appearance]="'border'"> <span fuseAlertTitle>Error alert</span> This is a alert with an 'error' level severity </fuse-alert>

## Title and alert

All alert boxes have title and alert content that can be customized.

###### Example

Alert title This is the alert content Alert title without any content Simple alert without a title <fuse-alert [appearance]="'soft'" [type]="'info'"> <span fuseAlertTitle>Alert title</span> This is the alert content </fuse-alert> <fuse-alert [appearance]="'soft'" [type]="'info'"> <span fuseAlertTitle>Alert title without any content</span> </fuse-alert> <fuse-alert [appearance]="'soft'" [type]="'info'"> Simple alert without a title </fuse-alert>

## Icons

The info, success, warning and error type alert boxes have default icons and they are visible by default. If you wish to hide those icons, use the `[showIcon]="false"` input.

###### Example

Success alert with no icon <fuse-alert [appearance]="'soft'" [type]="'success'" [showIcon]="false"> Success alert with no icon </fuse-alert>

## Custom icons

All alert boxes come with custom icon support. To use a custom icon, simply use `fuseAlertIcon` attribute on an element you wish to use as the icon. If there is a default icon for the alert box, custom icon will override it.

###### Example

Info alert with a custom icon <fuse-alert [appearance]="'soft'" [type]="'info'"> <mat-icon class="icon-size-5" fuseAlertIcon [svgIcon]="'heroicons_solid:lock-open'"> </mat-icon> Info alert with a custom icon </fuse-alert>

## Dismissible alerts

Dismissible alerts can be removed from the view by clicking their dismiss (x) button. In order to get the dismiss button visible, the `[dismissed]` input must be explicitly set either to `true` or `false`. Setting the `[dismissed]` input to `null` or simply removing it from the element will remove the dismiss button.

###### Example

Your subscription model is successfully upgraded to the Lifetime Pro. This one has a lot of text so you can see how the text is going to be displayed. Also this is a dismissible alert box which can be dismissed by clicking the dismiss button. <fuse-alert [appearance]="'soft'" [dismissible]="true" [dismissed]="false" [name]="'alertBox1'" [type]="'success'"> Your subscription model is successfully upgraded to the <b>Lifetime Pro</b>. </fuse-alert> <fuse-alert [appearance]="'soft'" [dismissible]="true" [dismissed]="false" [name]="'alertBox2'" [type]="'info'"> This one has a lot of text so you can see how the text is going to be displayed. Also this is a dismissible alert box which can be dismissed by clicking the <b>dismiss</b> button. </fuse-alert>

## Dismissible alerts controlled from the service

Alerts can be shown and dismissed via `FuseAlertService`.

###### Example

Your subscription model is successfully upgraded to the Lifetime Pro. This one has a lot of text so you can see how the text is going to be displayed. Also this is a dismissible alert box which can be dismissed by clicking the close button. <button class="mr-3" mat-flat-button [color]="'primary'" (click)="show('alertBox3'); show('alertBox4')"> Show alert boxes </button> <button mat-flat-button [color]="'primary'" (click)="dismiss('alertBox3'); dismiss('alertBox4')"> Dismiss alert boxes </button> <fuse-alert [appearance]="'soft'" [dismissible]="true" [dismissed]="false" [name]="'alertBox3'" [type]="'success'"> Your subscription model is successfully upgraded to the <b>Lifetime Pro</b>. </fuse-alert> <fuse-alert [appearance]="'soft'" [dismissible]="true" [dismissed]="false" [name]="'alertBox4'" [type]="'info'"> This one has a lot of text so you can see how the text is going to be displayed. Also this is a dismissible alert box which can be dismissed by clicking the <b>close</b> button. </fuse-alert> private _fuseAlertService = inject(FuseAlertService); /** * Dismiss the alert via the service * * @param name */ dismiss(name: string): void { this._fuseAlertService.dismiss(name); } /** * Show the alert via the service * * @param name */ show(name: string): void { this._fuseAlertService.show(name); }