Alert ​

Displays important alert messages.

Basic Usage ​

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

Alert provides 4 types of themes defined by type, whose default value is info.

Theme ​

Alert provide two different themes, light and dark.

Set effect to change theme, default is light.

Customizable Close Button ​

Customize the close button as texts or other symbols.

Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. closable attribute decides if the component can be closed or not. It accepts boolean, and the default is true. You can set close-text attribute to replace the default cross symbol as the close button. Be careful that close-text must be a string. close event fires when the component is closed.

With Icon ​

Displaying an icon improves readability.

Setting the show-icon attribute displays an icon that corresponds with the current Alert type.

Centered Text ​

Use the center attribute to center the text.

With Description ​

Description includes a message with more detailed information.

Besides the required title attribute, you can add a description attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.

With Icon and Description ​

At last, this is an example with both icon and description.

Alert API ​

Attributes ​

NameDescriptionTypeDefault
titlealert title.string—
typealert type.enuminfo
descriptiondescriptive text.string—
closablewhether alert can be dismissed.booleantrue
centerwhether content is placed in the center.booleanfalse
close-textcustomized close button text.string—
show-iconwhether a type icon is displayed.booleanfalse
effecttheme style.enumlight

Events ​

NameDescriptionType
closetrigger when alert is closed.Function

Slots ​

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

Source ​

Component • Style • Docs

Contributors ​