Notiflix

welcome to Notiflix

Notiflix is a pure JavaScript library for client-side non-blocking notifications that makes your web projects much better.

Download the latest version of Notiflix

Notiflix-1.5.0.zip Notiflix downloaded 380 times
Notiflix Includes
Minified

notiflix-1.5.0.min.js

notiflix-1.5.0.min.css

All In One (Internal CSS)

notiflix-aio-1.5.0.min.js

Browser Compatibility

  • Chrome
  • Firefox
  • Safari
  • Opera
  • * IE 10+
  • * Edge

* Not supported SVG Animation

Notiflix Notify

First of all you have to initialize Notiflix Notify. The Notify includes 4 types of notifications: Success, Failure, Warning, and Info. Examples of use are as below. Notiflix Notify is fully customizable. You may visit the Documentation page to learn how.

// Notiflix Notify - Basic Initialize Notiflix.Notify.Init({});

Notiflix Notify Success

Advanced Options
// You can type your text in String format. Notiflix.Notify.Success('Sol lucet omnibus');
Arrow Notify Success Sol lucet omnibus
Live Demo

You can type your own text for the live demonstration.

Notiflix.Notify.Success(''); Click to try

Notiflix Notify Failure

Advanced Options
// You can type your text in String format. Notiflix.Notify.Failure('Qui timide rogat docet negare');
Arrow Notify Failure Qui timide rogat docet negare
Live Demo

You can type your own text for the live demonstration.

Notiflix.Notify.Failure(''); Click to try

Notiflix Notify Warning

Advanced Options
// You can type your text in String format. Notiflix.Notify.Warning('Memento te hominem esse');
Arrow Notify Warning Memento te hominem esse
Live Demo

You can type your own text for the live demonstration.

Notiflix.Notify.Warning(''); Click to try

Notiflix Notify Info

Advanced Options
// You can type your text in String format. Notiflix.Notify.Info('Cogito ergo sum');
Arrow Notify Info Cogito ergo sum
Live Demo

You can type your own text for the live demonstration.

Notiflix.Notify.Info(''); Click to try
Notiflix Notify - Callback();

You can add a callback function after the "string text" is separated with a comma. The callback option can also be applied to 4 types of notifications.

Notifications with added callback function will not disappear until they were clicked.

// Sample Usage of Callback Function Notiflix.Notify.Success('Click Me', function(){ alert(''); }); Click to try

Notiflix Report

First of all you have to initialize Notiflix Report. The Report includes 4 types of notifications: Success, Failure, Warning, and Info. Examples of use are as below. Notiflix Report is fully customizable. You may visit the Documentation page to learn how.

// Notiflix Report - Basic Initialize Notiflix.Report.Init({});

Notiflix Report Success

Advanced Options
Usage

You have to use 3 of the parameters in String format:
"Title", "Message" and "Button Text".

// You also can get your parameters as a Variable declared before. (The values have to be in String format) Notiflix.Report.Success( 'Notiflix Success', '"Do not try to become a person of success but try to become a person of value." <br><br>- Albert Einstein', 'Click' ); Arrow
Report Success
Notiflix Success

"Do not try to become a person of success but try to become a person of value."

- Albert Einstein

Click
Live Demo

You can type your own parameters for the live demonstration.

Notiflix.Report.Success( '', '', '' ); Click to try Refresh

Notiflix Report Failure

Advanced Options
Usage

You have to use 3 of the parameters in String format:
"Title", "Message" and "Button Text".

// You also can get your parameters as a Variable declared before. (The values have to be in String format) Notiflix.Report.Failure( 'Notiflix Failure', '"Failure is simply the opportunity to begin again, this time more intelligently." <br><br>- Henry Ford', 'Click' ); Arrow
Report Failure
Notiflix Failure

"Failure is simply the opportunity to begin again, this time more intelligently."

- Henry Ford

Click
Live Demo

You can type your own parameters for the live demonstration.

Notiflix.Report.Failure( '', '', '' ); Click to try Refresh

Notiflix Report Warning

Advanced Options
Usage

You have to use 3 of the parameters in String format:
"Title", "Message" and "Button Text".

// You also can get your parameters as a Variable declared before. (The values have to be in String format) Notiflix.Report.Warning( 'Notiflix Warning', '"The peoples who want to live comfortably without producing and fatigue; they are doomed to lose their dignity, then liberty, and then independence and destiny." <br><br>- Mustafa Kemal Ataturk', 'Click' ); Arrow
Report Warning
Notiflix Warning

"The peoples who want to live comfortably without producing and fatigue; they are doomed to lose their dignity, then liberty, and then independence and destiny."

- Mustafa Kemal Ataturk

Click
Live Demo

You can type your own parameters for the live demonstration.

Notiflix.Report.Warning( '', '', '' ); Click to try Refresh

Notiflix Report Info

Advanced Options
Usage

You have to use 3 of the parameters in String format:
"Title", "Message" and "Button Text".

// You also can get your parameters as a Variable declared before. (The values have to be in String format) Notiflix.Report.Info( 'Notiflix Info', '"Knowledge rests not upon truth alone, but upon error also." <br><br>- Carl Gustav Jung', 'Click' ); Arrow
Report Info
Notiflix Info

"Knowledge rests not upon truth alone, but upon error also."

- Carl Gustav Jung

Click
Live Demo

You can type your own parameters for the live demonstration.

Notiflix.Report.Info( '', '', '' ); Click to try Refresh
Notiflix Report - Callback();

You can add a callback function after the third parameter (button text) is separated with a comma. The callback option can also be applied to 4 types of notifications.

Notiflix.Report.Success( 'Title', 'Message', 'Button Text', function(){ alert(''); } ); Click to try

Notiflix Confirm

First of all you have to initialize Notiflix Confirm. Notiflix Confirm is a confirm box for verifying or accepting something. Example of use is below. Notiflix Confirm is fully customizable. You may visit the Documentation page to learn how.

// Notiflix Confirm - Basic Initialize Notiflix.Confirm.Init({});
Usage

You have to use 4 of the parameters in String format and a CallBack function as in 5th.

// For example: "Title", "Message", "Confirm Button Text", "Deny Button Text", and the CallBack function. Notiflix.Confirm.Show( 'Notiflix Confirm', 'Do you agree with me?', 'Yes', 'No', function(){ alert('Thank you.'); } ); Click to try Arrow
Notiflix Confirm

Do you agree with me?

Live Demo

You can type your own parameters for the live demonstration.

Notiflix.Confirm.Show( '', '', '', '', function(){ alert(''); } ); Click to try Refresh

Notiflix Loading

First of all you have to initialize Notiflix Loading. The Loading includes 6 types of animated SVG icons: "Standard", "Hourglass", "Circle", "Arrows", "Dots", and "Pulse". An additional type is "Custom". You have to set the URL of your SVG icon to use the "Custom". Examples of use are as below. Notiflix Loading is fully customizable. You may visit the Documentation page to learn how.

// Notiflix Loading - Basic Initialize Notiflix.Loading.Init({});

Notiflix Loading Standard

Advanced Options
// Show Loading with Standard icon Notiflix.Loading.Standard(); Click to try
Arrow
Standard
// You can add a message if you wish so, in String format Notiflix.Loading.Standard('Loading...'); Click to try
Arrow
Standard

Loading...

Notiflix Loading Hourglass

Advanced Options
// Show Loading with Hourglass icon Notiflix.Loading.Hourglass(); Click to try
Arrow
Hourglass
// You can add a message if you wish so, in String format Notiflix.Loading.Hourglass('Loading...'); Click to try
Arrow
Hourglass

Loading...

Notiflix Loading Circle

Advanced Options
// Show Loading with Circle icon Notiflix.Loading.Circle(); Click to try
Arrow
Circle
// You can add a message if you wish so, in String format Notiflix.Loading.Circle('Please wait...'); Click to try
Arrow
Circle

Please wait...

Notiflix Loading Arrows

Advanced Options
// Show Loading with Arrows icon Notiflix.Loading.Arrows(); Click to try
Arrow
Arrows
// You can add a message if you wish so, in String format Notiflix.Loading.Arrows('Sending...'); Click to try
Arrow
Arrows

Sending...

Notiflix Loading Dots

Advanced Options
// Show Loading with Dots icon Notiflix.Loading.Dots(); Click to try
Arrow
Dots
// You can add a message if you wish so, in String format Notiflix.Loading.Dots('Processing...'); Click to try
Arrow
Dots

Processing...

Notiflix Loading Pulse

Advanced Options
// Show Loading with Pulse icon Notiflix.Loading.Pulse(); Click to try
Arrow
Pulse
// You can add a message if you wish so, in String format Notiflix.Loading.Pulse('Processing...'); Click to try
Arrow
Pulse

Processing...

Notiflix Loading Custom

If you want to use your own SVG icon, you can define it and use it as follows. You may visit the Documentation page to learn much.

// Initial with custom SVG Icon Notiflix.Loading.Init({ customSvgUrl:'https://www.notiflix.com/dir/icon.svg', svgSize:'80px', });
// Show Loading with Custom icon Notiflix.Loading.Custom(); Click to try
Arrow
Custom
// You can add a message if you wish so, in String format Notiflix.Loading.Custom('Loading...'); Click to try
Arrow
Custom

Loading...

Notiflix Loading Common Features

The following functions are for all Loading types.

Change() and Remove()

// You can change the message as many times as you like. (For example: During an AJAX request or with WebSocket.) Notiflix.Loading.Change('Loading... %20');
Arrow
Hourglass

Loading... %20

// Remove the Loading immediately Notiflix.Loading.Remove(); // Remove the Loading after delay (600 millisecond) Notiflix.Loading.Remove(600);
Arrow

Notiflix uses cookies to personalise content and adverts and to analyse traffic.

Learn More I Accept
Get Contact
Captcha