Clarity Core Demo - JavaScript

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

Buttons

primary success danger disabled

outline success danger disabled

flat flat disabled

Tags

Info Success Warning Danger Austin 1 New York 2 Palo Alto 3 San Francisco 12 Seattle 15

Badge

2 3 12 15 1 1 15 2 3

Icons



required