Skip to content 
This is an info alert This is an alert alert This is a negative alert This is a positive alert
Alert content
Alert content
This is an info alert This is an info alert OK
This is an info alert Custom alert
Alert - Web Component
The Alert component can be used imported from:
Playground
Parameters
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 | A11y |
|---|---|---|---|---|
config | string | Defines the state of the alert. Possible values are:
| ||
content | string | The content of the alert. | default | |
icon | string | The icon of the alert. | ||
confirm-text | string | The text of the button. | confirm-text | |
hide-close | boolean | Hides the close button |
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|---|---|
confirm | void | Fired when the user confirms the alert. |
close | void | Fired when the user closes the alert. |
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
default | span | |
confirm-text | span |
Parameters use
config
The config attribute is used to set the state of the alert. Possible values are: info, alert, negative and positive.
content
The thing to be assigned to the alert. It uses the default slot too.
icon
The icon attribute is used to set the icon of the alert. Check the icon list here. This attribute will receive the name of the icon to be show. You can use both solid or line (outlined) version.
confirm-text
The confirm-text attribute is used to set the text of the confirm button.
You can also use the confirm-text slot:
hide-close
The hide-close attribute is used to hide the close button.
Both background color and text color can be customized using the --z-alert--bg and --z-alert--color tokens.
Browser support
Detected engine:
Chromium
Webkit
Gecko