allowEscapeKey

Type: Boolean
Default: true

Whether to close the alert when the Escape key is pressed

animation

Type: Boolean
Default: true

Whether to use an animation when show the alert

backdrop

Type: Boolean
Default: true

Whether to use a backdrop

background

Type: String
Default: #fff

The alert's background color

cancelButtonAriaLabel

Type: String
Default: Cancel

The cancel button's aria-label attribute

cancelButtonColor

Type: String
Default: #aaa

The cancel button's background color

cancelButtonText

Type: String
Default: Cancel

The cancel button's text

closeButtonAriaLabel

Type: String
Default: Close

The close button's aria-label attribute

confirmButtonAriaLabel

Type: String
Default: OK

The confirm button's aria-label attribute

confirmButtonColor

Type: String
Default: #3085d6

The confirm button's background color

confirmButtonText

Type: String
Default: OK

The confirm button's text

debug

Type: Boolean
Default: false

If true will log events into console

focusCancel

Type: Boolean
Default: false

Whether to focus on cancel button when alert show

focusConfirm

Type: Boolean
Default: true

Whether to focus on confirm button when alert show

footer

Type: String
Default: ""

If not empty will show it's content at the alert's footer

header

Type: String
Default: ""

If not empty will show it's content at the alert's header

heading

Type: String
Default: ""

The alert's heading text

position

Type: String
Default: center

The alert's position. Accepts: top, top-start, top-left, top-end, top-right, center, center-start, center-left, center-end, center-right, bottom, bottom-start, bottom-left, bottom-end, bottom-right

showCancelButton

Type: Boolean
Default: false

Whether to show the cancel button

showCloseButton

Type: Boolean
Default: false

Whether to show the close button

showConfirmButton

Type: Boolean
Default: true

Whether to show the confirm button

text

Type: String
Default: ""

The alert's text

type

Type: String
Default: ""

The alert's icon. Accepts: success, error

cancel

Manually triggers the cancel.alert event.

const alert = document.querySelector("zino-alert");
alert.cancel();

close

Manually closes an alert and triggers the close.alert event.

const alert = document.querySelector("zino-alert");
alert.close();

confirm

Manually triggers the confirm.alert event.

const alert = document.querySelector("zino-alert");
alert.confirm();

open

Manually opens an alert and triggers the open.alert event.

const alert = document.querySelector("zino-alert");
alert.open();

cancel.alert

This event is fired immediately when the Cancel button has been clicked.

document.querySelector("zino-alert").addEventListener("cancel.alert", function(event) {
    // do something...
});

close.alert

This event is fired immediately when the close instance method has been called.

document.querySelector("zino-alert").addEventListener("close.alert", function(event) {
    // do something...
});

confirm.alert

This event is fired immediately when the Confirm button has been clicked.

document.querySelector("zino-alert").addEventListener("confirm.alert", function(event) {
    // do something...
});

open.alert

This event is fired immediately when the open instance method has been called.

document.querySelector("zino-alert").addEventListener("open.alert", function(event) {
    // do something...
});