Alert - CSS Component
Browser support
Construction
The CSS component uses the div
tag with an z-alert
HTML custom attribute.
z-alert
The z-alert
parameter is the main parameter used to render the alert component.
Action card content
The default state of the alert is info
. There are four states available: info
, alert
, negative
, and positive
.
Action card content
Action card content
Action card content
TIP
You can add a confirm
button to the alert component, before the close
button.
Action card content
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.
You can customize the background color of the alert component by using the --z-alert--bg
CSS custom property.
Action card content
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@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>