Skip to content 
Alert - CSS Component
The Alert component can be used imported from:
Playground
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 closebutton.
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
Browser support
Detected engine:
Chromium
Webkit
Gecko