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 | |
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
content
The thing to be assigned to the alert. It uses the default slot too.
config
The config attribute is used to set the state of the alert. Possible values are: info, alert, negative and positive.
confirm-text
The confirm-text attribute is used to set the text of the confirm 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