get_app Download

# Notifications

Nice, simple, and interactive notifications.

# Notifications Defaults

To add a notification we have the global function $vs.notify. The first parameter is a json with all the necessary attributes, or if we only want the standard notification we can only add a string with the text of the notification.

# Positions

We can change the place where the notification appears with the property position. A practical example would be: position: 'top-right'. The supported values are:

  • top-right
  • top-left
  • bottom-left
  • bottom-center
  • top-center

WARNING

The default notifications appear bottom-right, it is not necessary to add the position property if it is the desired position.

# Icons

Notifications can include icons to improve the user experience and to construct a more pleasant and intuitive notification. To make this, use the icon property. A practical example would be: icon: 'chat'.

TIP

Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.

# Fixed and function click

Sometimes we need to execute a function when the user clicks on the notification. For this, pass a function to the click property. Example: click:()=>{ ... }

# Time

You can change the total time that the notification stays on the screen with the time property. Example: time: 4000.

TIP

By default the notifications have a time of 2000 (2s)

Edit this page

API #

Name Type Parameters Description default
$vs.notify function (title,text,color,position,icon,click,fixed) Function that makes the notification appear.
title string Title of the notification.
time Number Waiting time for notification to disappear. 2s
text string Notification text.
color string RGB, HEX, primary, success, danger, warning, dark Background color of the notification.
position string bottom-right, top-right, top-left, bottom-left, bottom-center, top-center Position in which the notification appears.
icon string Material Icon Notification Icon.
icon-pack String Icon Pack Class Name Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. material-icons
click Function function(){ ... }, ()=>{ ... } Function executed by clicking on the notification
fixed Boolean true, false Removes the automatic elimination of the notification

Number Input keyboard_arrow_right