Alert - Web Component

Browser support

Detected engine:

The Web component uses the <z-alert> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

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

Name	Type	Description	Slot
`config`	`string`	Defines the state of the alert. Possible values are: `info`, `alert`, `negative` and `positive`
`content`	`string`	The content of the alert.	`default`
`confirm-text`	`string`	The text of the button.	`confirm-text`
`hide-close`	`boolean`	Hides the close button

The events emitted from the component are:

Name	Payload	Description
`confirm`	`void`	Fired when the user confirms the alert.
`close`	`void`	Fired when the user closes the alert.

The available slots for the component are:

Name	Tags	Description
`default`	`span`
`confirm-text`	`span`

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

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.