Alert

Displays important alert messages.

Basic Usage

Alert components are non-overlay elements in the page that does not disappear automatically.

Theme

Alert provide two different themes, light and dark.

Customizable Close Button

Customize the close button as texts or other symbols.

With Icon

Displaying an icon improves readability.

Centered Text

Use the center attribute to center the text.

With Description

Description includes a message with more detailed information.

With Icon and Description

Alert API

Alert Attributes

NameDescriptionTypeDefaultRequired
titlealert title.stringNo
typealert type.'success' | 'warning' | 'info' | 'error''info'No
descriptiondescriptive text.stringNo
closablewhether closable or not.booleantrueNo
centerwhether to center the text.booleanfalseNo
close-textcustomized close button text.stringNo
show-iconwhether a type icon is displayed.booleanfalseNo
effecttheme style.'light' | 'dark''light'No

Alert Events

NameDescriptionType
closetrigger when alert is closed.(evt: MouseEvent) => void

Alert Slots

NameDescription
defaultcontent of the alert description.
titlecontent of the alert title.

Source

ComponentDocs

Contributors