Alert - Web Component

...

Browser support

Parameters

The Web component uses a <z-alert> tag.

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

Name	Type	Description
config (optional)	string	Defines the state of the alert. Possible values are: info, alert, negative and positive
content (optional)	string	The content of the alert.
confirm-text (optional)	string	The text of the button.

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

<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/alert.js"></script>

Code

<z-alert status="info" button-text="Okay">Alert text</z-alert>
<z-alert status="alert" button-text="Okay" content="Alert text"></z-alert>
<z-alert status="negative" button-text="Okay" content="Alert text"></z-alert>