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
Basic

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
Closable

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.
Icon

Decent icon make information more clear and more friendly.

expand codeexpand code
      Loading...
Banner

Display Alert as a banner at top of page.

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

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

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

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
Description

Additional description for alert message.

expand codeexpand code
      Loading...
Info Text
Customized Close 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

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>-