Alert - Web Component

Browser support

Parameters

The Web component uses the <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.

The events emitted from the component are:

Name	Payload	Description
onconfirm	Event	Fired when the user confirms the alert.
onclose	Event	Fired when the user closes the alert.

config

The config attribute is used to set the state of the alert. Possible values are: info, alert, negative and positive.

This is an info alert This is an alert alert This is a negative alert This is a positive alert

confirm-text

The confirm-text attribute is used to set the text of the confirm button.

This is an info alert

Both background color and text color can be customized using the --z-alert--bg and --z-alert--color tokens.

Custom alert

Playground

Customization

HTML Examples

Imports

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

Code

<z-alert config="info" confirm-text="Okay">Alert text</z-alert>
<z-alert config="alert" confirm-text="Okay" content="Alert text"></z-alert>
<z-alert config="negative" confirm-text="Okay" content="Alert text"></z-alert>