Alert ​

...

Browser support ​

...

Parameters ​

The CSS component uses the div tag with an z-alert HTML custom attribute.

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
z-alertstring

Defines the state of the alert. Possible values are:

info, alert, negative and positive

Attention!

Make sure to only use two buttons inside the z-alert component. First button it's used for interaction, check the interaction guidelines. Second button will render an X icon, the main goal of the second button is to close the alert.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Alert.css" />
Code
html
<div z-alert="info">
  Alert text
  <button>Okay</button>
  <button></button>
</div>
<div z-alert="alert">
  Alert text
  <button>Okay</button>
  <button></button>
</div>
<div z-alert="negative">
  Alert text
  <button>Okay</button>
  <button></button>
</div>