Alert

Alert component for feedback.

When To Use#

  • When you need to show alert messages to users.
  • When you need a persistent static container which is closable by user actions.
import { NzAlertModule } from 'ng-zorro-antd/alert';

Examples

Success Text

The simplest usage for short messages.

expand codeexpand code
Loading...
Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text
Error TextError Description Error Description Error Description Error Description Error Description Error Description

To show close button.

expand codeexpand code
Loading...
Success Tips
Informational Notes
Warning
Error
Success TipsDetailed description and advices about successful copywriting.
Informational NotesAdditional description and informations about copywriting.
WarningThis is a warning notice about copywriting.
ErrorThis is an error message about copywriting.

Decent icon make information more clear and more friendly.

expand codeexpand code
Loading...

Display Alert as a banner at top of page.

expand codeexpand code
Loading...
S
Success TipsDetailed description and advices about successful copywriting.

Make information more clear and more friendly and meet customized needs.

expand codeexpand code
Loading...
Success Text
Info Text
Warning Text
Error Text

There are 4 types of Alert: success, info, warning, error.

expand codeexpand code
Loading...
Success TextSuccess Description Success Description Success Description
Info TextInfo Description Info Description Info Description Info Description
Warning TextWarning Description Warning Description Warning Description Warning Description
Error TextError Description Error Description Error Description Error Description

Additional description for alert message.

expand codeexpand code
Loading...
Info Text

Replace the default icon with customized content.

expand codeexpand code
Loading...
Success Text

Error Text

Error Description Error Description Error Description Error Description


Warning Text

Info Text

Info Description Info Description Info Description Info Description

Custom action.

expand codeexpand code
Loading...

API#

nz-alert#

PropertyDescriptionTypeDefaultGlobal Config
[nzBanner]Whether to show as bannerbooleanfalse
[nzAction]Customized alert's actionstring | TemplateRef<void>-
[nzCloseable]Whether Alert can be closedboolean-
[nzCloseText]Close text to showstring | TemplateRef<void>-
[nzDescription]Additional content of Alertstring | TemplateRef<void>-
[nzMessage]Content of Alertstring | TemplateRef<void>-
[nzShowIcon]Whether to show icon, in nzBanner mode default is truebooleanfalse
[nzIconType]Icon type, effective when nzShowIcon is truestring-
[nzType]Type of Alert styles, in nzBanner mode default is 'warning''success' | 'info' | 'warning' | 'error''info'
[nzIcon]Custom icon, effective when showIcon is truestring | TemplateRef<void>-
(nzOnClose)Callback when Alert is closedEventEmitter<void>-