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:
Name | Type | Description |
---|---|---|
z-alert | string | Defines the state of the alert. Possible values are:
|
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>