Notification

Displays a global notification message at a corner of the page.

Basic usage

With types

We provide four types: success, warning, info and error.

Custom position

Notification can emerge from any corner you like.

With offset

Customize Notification's offset from the edge of the screen.

Use HTML string

message supports HTML string.

WARNING

Although message property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. So when dangerouslyUseHTMLString is on, please make sure the content of message is trusted, and never assign message to user-provided content.

Hide close button

It is possible to hide the close button

Global method

Element Plus has added a global method $notify for app.config.globalProperties. So in a vue instance you can call Notification like what we did in this page.

Local import

import { ElNotification } from 'element-plus'

In this case you should call ElNotification(options). We have also registered methods for different types, e.g. ElNotification.success(options). You can call ElNotification.closeAll() to manually close all the instances.

Options

AttributeDescriptionTypeAccepted ValuesDefault
titletitlestring
messagedescription textstring/Vue.VNode
dangerouslyUseHTMLStringwhether message is treated as HTML stringbooleanfalse
typenotification typestringsuccess/warning/info/error
iconClasscustom icon's class. It will be overridden by typestring
customClasscustom class name for Notificationstring
durationduration before close. It will not automatically close if set 0number4500
positioncustom positionstringtop-right/top-left/bottom-right/bottom-lefttop-right
showClosewhether to show a close buttonbooleantrue
onClosecallback function when closedfunction
onClickcallback function when notification clickedfunction
offsetoffset from the top edge of the screen. Every Notification instance of the same moment should have the same offsetnumber0

Methods

Notification and this.$notify returns the current Notification instance. To manually close the instance, you can call close on it.

MethodDescription
closeclose the Notification