Alerts
Lightweight Alerts
This example is an alert with a status of "info" inside a lightweight alert group.
This example is an alert with a status of "danger" and inline action buttons inside a lightweight alert
group.
Clickable Action
This example is an alert with a status of "loading" inside a lightweight alert group.
Alert actions should not be viewable in lightweight alerts
Alert actions should not be viewable in lightweight alerts
This example is a multi-line alert with a status of "unknown" inside a lightweight alert group. A block of
lorem ipsum sample text follows: Drake Equation take root and flourish culture rings of Uranus quasar
hundreds of thousands? Cambrian explosion gathered by gravity of brilliant syntheses vanquish the
impossible finite but unbounded not a sunrise but a galaxyrise. Intelligent beings two ghostly white
figures in coveralls and helmets are soflty dancing something incredible is waiting to be known vanquish
the impossible vastness is bearable only through love concept of the number one and billions upon billions
upon billions upon billions upon billions upon billions upon billions.
Button 1
Default Alerts (Pastel Bubbles)
This example is a closable alert inside an alert group with a status of "info".
This example is a closable alert with a custom icon shape inside an alert group with a status of "info".
This example is an alert with a "loading" status and alert action buttons inside an alert group with a
status of "info".
Button 1
Button 2
This example is a closable alert inside an alert group with a status of "success".
This example is a closable alert with alert action buttons inside an alert group with a status of
"success".
Button 1
Button 2
This example is a closable alert inside an alert group with a status of "warning".
This example is a closable alert with alert action buttons inside an alert group with a status of
"warning".
Button 1
Button 2
This example is a closable alert inside an alert group with a status of "danger".
This example is a closable alert with alert action buttons inside an alert group with a status of
"danger".
Button 1
Button 2
This example is an alert inside an alert group.
This example is a closable alert inside an alert group.
This example is an alert with alert action buttons and a custom icon shape inside an alert group.
Button 1
Button 2
This example is a closable alert with alert action buttons and multiple lines of text inside an alert
group. A block of lorem ipsum sample text follows: Drake Equation take root and flourish culture rings of
Uranus quasar hundreds of thousands? Cambrian explosion gathered by gravity of brilliant syntheses
vanquish the impossible finite but unbounded not a sunrise but a galaxyrise. Intelligent beings two
ghostly white figures in coveralls and helmets are soflty dancing something incredible is waiting to be
known vanquish the impossible vastness is bearable only through love concept of the number one and
billions upon billions upon billions upon billions upon billions upon billions upon billions.
Button 1
Compact Alerts
This example is a closable alert inside a compact alert group with a status of "info".
This example is a closable alert with alert actions and a custom icon shape inside a compact alert group
with a status of "info".
Button 1
Button 2
This example is a closable alert inside a compact alert group with a status of "success".
This example is a closable alert with alert actions and a custom icon shape inside a compact alert group
with a status of "success".
Button 1
Button 2
This example is a closable alert inside a compact alert group with a status of "warning".
This example is a closable alert with alert actions and a custom icon shape inside a compact alert group
with a status of "warning".
Button 1
Button 2
This example is a closable alert with a status of "loading" inside a compact alert group with a status of
"danger".
This example is a closable alert with alert actions inside a compact alert group with a status of
"warning".
Button 1
Button 2
This example is an alert inside a compact alert group.
This example is a closable alert inside a compact alert group.
This example is an alert with alert actions inside a compact alert group.
Button 1
Button 2
This example is a closable alert with multiple lines of text and an alert action inside a compact alert
group. A block of lorem ipsum sample text follows: Drake Equation take root and flourish culture rings of
Uranus quasar hundreds of thousands? Cambrian explosion gathered by gravity of brilliant syntheses
vanquish the impossible finite but unbounded not a sunrise but a galaxyrise. Intelligent beings two
ghostly white figures in coveralls and helmets are soflty dancing something incredible is waiting to be
known vanquish the impossible vastness is bearable only through love concept of the number one and
billions upon billions upon billions upon billions upon billions upon billions upon billions.
Button 1
This example is an alert with a status of "info" inside a compact, lightweight alert group.
This example is an alert with a status of "danger" and an inline action inside a compact, lightweight
alert group.Clickable Action
This example is an alert with a status of "loading" inside a compact, lightweight alert group.
Alert actions should not be viewable in lightweight alerts
Alert actions should not be viewable in lightweight alerts
This example is a multi-line alert with a status of "unknown" and two inline actions inside a compact,
lightweight alert group. A block of lorem ipsum sample text follows: Drake Equation take root and flourish
culture rings of Uranus quasar hundreds of thousands? Cambrian explosion gathered by gravity of brilliant
syntheses vanquish the impossible finite but unbounded not a sunrise but a galaxyrise. Intelligent beings
two ghostly white figures in coveralls and helmets are soflty dancing something incredible is waiting to
be known vanquish the impossible vastness is bearable only through love concept of the number one and
billions upon billions upon billions upon billions upon billions upon billions upon
billions.Clickable Action 1Clickable Action 2
Alert actions should not be viewable in lightweight alerts
Banner Alerts (App-Level)
This example is a closable banner alert inside a banner alert group with a status of "info".
This example is a closable alert with a status of "success" inside a banner alert group.
This example is a closable alert with alert action buttons and a status of "warning" inside a banner alert
group.
Button 1
Button 2
This example is a closable alert with a status of "danger" inside a banner alert group.
Button 1
Button 2
This example is a non-closable alert with alert actions and a status of "unknown" inside a banner alert
group.
Button 1
Button 2
This example is an alert with alert actions and a status of "loading" inside a banner alert group.
Button 1