Skip to content


Alert informs users about important events.

Basic Usage

The most basic Alert using concise text prompts, including prompts for 6 situations: primary,secondary,warning,error,info.


Alert provide Light Theme Alert. demo Set light to change theme.

Customizable Close Button

Customize the close button as texts or other symbols.

demo 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 Title and Description

Description includes a message with more detailed information.

demo 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

Displaying an icon improves readability.

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

Icon can be found from Icones

Centered Text

Use the center attribute to center the text.

Alert Props

type'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info''primary'Alert type.
titlestringundefinedAlert title.
descriptionstringundefinedAlert message.
closablebooleanfalseWhether the alert can be closed.
centerbooleanfalseWhether to center the text.
close-textstring''Customized close button text.
iconstringundefinedCustomized alert icon.
lightbooleanfalseDetermine whether it's a light alert.

Alert Slots

default()Content of the alert description.
title()Content of the alert title.
icon()Icon of the alert content.
close()Close area of the alert header.

Alert Methods

close(evt: MouseEvent) => voidTrigger when alert is closed.

MIT Licensed