Skip to main content Skip to navigation Skip to search

Angular Components


The ClrAlert component displays a single alert.

Selector & Basic Usage


Binding Type Options Default Description
[clrAlertClosable] input true, false true If false, the alert will not be closable by clicking on the top-right "x".
[(clrAlertClosed)] two-way true, false false Two-way binding on the state of the alert: opened or closed.
[clrAlertType] input info, warning, success, danger info Sets the type of the alert
[clrAlertSizeSmall] input true, false false Change the size to a small alert
[clrAlertIcon] input any icon shape varies Allows you to customize the alert icon using any icon shape name
[clrAlertAppLevel] input true, false false Changes the alert to be app level at the top of the page


The ClrAlerts component can host a group of alerts to enable pagination.

Binding Type Options Default Description
[(clrCurrentAlertIndex)] two-way 0, 1, 2, 3... 0 Sets the current index of alerts in a list
[(clrCurrentAlert)] two-way instance of ClrAlert any Provides the currently activated ClrAlert instance


The ClrAlertItem component wraps the alert content to support displaying an icon.

CSS Classes


There are two types of wrappers that be placed inside of the ClrAlertItem component.

CSS Class Host Element(s) Type Description Required
.alert-text div, span Defines the text that is placed into the alert true
.alert-actions div, span Defines any action buttons or dropdowns for an alert false
.alert-action button, clr-dropdown Defines a button or dropdown to be styled for inside of an alert true