• Documentation
  • Generator
Search in Notify
  • Search in Notify
  • Search in Report
  • Search in Confirm
  • Search in Loading
Results in Notify Options:
Option Default Type Description
No results found
Notiflix

Documentation

Notiflix Notify All Options

You can find all the options at the table below. You can click "Code View" tab to see usages of Init and Merge

Table View Code View

Notify Common Options:

Option Default Type Description
width 280px string

Changes the width. You can use "px" or "%"
position right-top string

4 types of positions you can use: right-top right-bottom left-top left-bottom
distance 10px string

Distance to body. You can use "px" or "%"
opacity 1 number

Changes the opacity. (Between 0 and 1)
borderRadius 5px string

Changes the radius of the notifications corners.
rtl false boolean

Specifies the text direction to "right-to-left"
timeout 3000 number

Milliseconds to hide the Notifications. Tip: 3000 ms = 3 seconds.
messageMaxLength 110 number

Ignores characters of the message text after the specified number.
backOverlay false boolean

If you want to use a colored overlay you can change this option to true
backOverlayColor rgba(0,0,0,0.5) string

Changes the color of the overlay. You can use HEX, RGB or RGBA.
ID NotiflixNotify string

Changes the ID (attribute) of the notifications.
className notiflix-notify string

Changes the class name (attribute) of the notifications.
zindex 4001 number

Changes the z-index.
useGoogleFont true boolean

Notiflix uses the "Quicksand" font-family via Google Fonts. If you already use the "Quicksand" font-family or you don't want to use it you can set this option to false
fontFamily Quicksand string

Changes the font-family.
fontSize 13px string

Changes the font-size of the message text.
cssAnimation true boolean

Notiflix uses CSS animations to show/hide the notifications. If you don't want to use CSS animations you can set this option to false
cssAnimationDuration 400 number

Changes the CSS animations duration as milliseconds. Tip: 400 ms = 0.4 second.
cssAnimationStyle fade string

6 types of styles you can use: fade zoom from-right from-left from-top from-bottom
closeButton false boolean

If you want to add a close button to notifications you can set this option to true (Notifications with close button will not disappear until they are clicked.)
useIcon true boolean

Allows the use of icons from the SVG or FontAwesome in notifications. By default, SVG type icons are defined. If you don't want to use Icons you can change this option to false
useFontAwesome false boolean

If you want to replace SVG icons to FontAwesome icons you can change this option to true
fontAwesomeIconStyle basic string

2 types of styles you can use: basic shadow
fontAwesomeIconSize 34px string

Changes the font-size of the FontAwesome icons.
plainText @1.3.0 true boolean

New Option: @1.3.0 and next versions
(@1.0.0 and next versions for React)
All text contents are PlainText. If you want use format to HTML you can change this option to false

Notify Success Options:

Option Default Type Description
background #00b462 string

Changes the background color of Success.
textColor #fff string

Changes the text color of Success.
childClassName success string

Changes the class name of Success.
notiflixIconColor rgba(0,0,0,0.2) string

Changes the SVG icon color of Success.
fontAwesomeClassName fas fa-check-circle string

Changes the FontAwesome icon class name of Success. (Notiflix uses Font Awesome Free 5.5.0)
fontAwesomeIconColor rgba(0,0,0,0.2) string

Changes the FontAwesome icon color of Success.

Notify Failure Options:

Option Default Type Description
background #f44336 string

Changes the background color of Failure.
textColor #fff string

Changes the text color of Failure.
childClassName failure string

Changes the class name of Failure.
notiflixIconColor rgba(0,0,0,0.2) string

Changes the SVG icon color of Failure.
fontAwesomeClassName fas fa-times-circle string

Changes the FontAwesome icon class name of Failure. (Notiflix uses Font Awesome Free 5.5.0)
fontAwesomeIconColor rgba(0,0,0,0.2) string

Changes the FontAwesome icon color of Failure.

Notify Warning Options:

Option Default Type Description
background #f2bd1d string

Changes the background color of Warning.
textColor #fff string

Changes the text color of Warning.
childClassName warning string

Changes the class name of Warning.
notiflixIconColor rgba(0,0,0,0.2) string

Changes the SVG icon color of Warning.
fontAwesomeClassName fas fa-exclamation-circle string

Changes the FontAwesome icon class name of Warning. (Notiflix uses Font Awesome Free 5.5.0)
fontAwesomeIconColor rgba(0,0,0,0.2) string

Changes the FontAwesome icon color of Warning.

Notify Info Options:

Option Default Type Description
background #00bcd4 string

Changes the background color of Info.
textColor #fff string

Changes the text color of Info.
childClassName info string

Changes the class name of Info.
notiflixIconColor rgba(0,0,0,0.2) string

Changes the SVG icon color of Info.
fontAwesomeClassName fas fa-info-circle string

Changes the FontAwesome icon class name of Info. (Notiflix uses Font Awesome Free 5.5.0)
fontAwesomeIconColor rgba(0,0,0,0.2) string

Changes the FontAwesome icon color of Info.

Notiflix.Notify.Init({});

You can find the default options in an Init Function as below.

// Notiflix Notify - All Options Notiflix.Notify.Init({ width:'280px', position:'right-top', distance:'10px', opacity:1, borderRadius:'5px', rtl:false, timeout:3000, messageMaxLength:110, backOverlay:false, backOverlayColor:'rgba(0,0,0,0.5)', ID:'NotiflixNotify', className:'notiflix-notify', zindex:4001, useGoogleFont:true, fontFamily:'Quicksand', fontSize:'13px', cssAnimation:true, cssAnimationDuration:400, cssAnimationStyle:'fade', closeButton:false, useIcon:true, useFontAwesome:false, fontAwesomeIconStyle:'basic', fontAwesomeIconSize:'34px', plainText:true, // New Option: @1.3.0 and next versions - (@1.0.0 and next versions for React) success: { background:'#00b462', textColor:'#fff', childClassName:'success', notiflixIconColor:'rgba(0,0,0,0.2)', fontAwesomeClassName:'fas fa-check-circle', fontAwesomeIconColor:'rgba(0,0,0,0.2)', }, failure: { background:'#f44336', textColor:'#fff', childClassName:'failure', notiflixIconColor:'rgba(0,0,0,0.2)', fontAwesomeClassName:'fas fa-times-circle', fontAwesomeIconColor:'rgba(0,0,0,0.2)', }, warning: { background:'#f2bd1d', textColor:'#fff', childClassName:'warning', notiflixIconColor:'rgba(0,0,0,0.2)', fontAwesomeClassName:'fas fa-exclamation-circle', fontAwesomeIconColor:'rgba(0,0,0,0.2)', }, info: { background:'#00bcd4', textColor:'#fff', childClassName:'info', notiflixIconColor:'rgba(0,0,0,0.2)', fontAwesomeClassName:'fas fa-info-circle', fontAwesomeIconColor:'rgba(0,0,0,0.2)', }, });

Notiflix.Notify.Merge({});

You can deeply extend the Init Function by using Merge Function. Examples of use are as below.

Website
global.js (Entire Website) // Notiflix Notify Init - global.js Notiflix.Notify.Init({ width:'300px', fontSize:'14px', timeout:4000, messageMaxLength:200, });
contact.js (Contact Page) // Notiflix Notify Merge - contact.js (The Merge Function, deeply extends the Global Init only for the Contact Page.) Notiflix.Notify.Merge({ width:'260px', fontSize:'12px', });

Notiflix Report All Options

You can find all the options at the table below. You can click "Code View" tab to see usages of Init and Merge

Table View Code View

Report Common Options:

Option Default Type Description
className notiflix-report string

Changes the class name (attribute).
width 320px string

Changes the width. You can use "px" or "%"
backgroundColor #f8f8f8 string

Changes the background color.
borderRadius 25px string

Changes the radius of the corners.
rtl false boolean

Specifies the text direction to "right-to-left"
zindex 4002 number

Changes the z-index.
backOverlay true boolean

If you don't want to use a colored overlay you can change this option to false
backOverlayColor rgba(0,0,0,0.5) string

Changes the color of the overlay. You can use HEX, RGB or RGBA.
useGoogleFont true boolean

Notiflix uses the "Quicksand" font-family via Google Fonts. If you already use the "Quicksand" font-family or you don't want to use it you can set this option to false
fontFamily Quicksand string

Changes the font-family.
svgSize 110px string

Changes the SVG Icons width and height. (Notiflix uses square scaled icons.)
plainText true boolean

All text contents are PlainText. If you want use format to HTML you can change this option to false
titleFontSize 16px string

Changes the font-size of the title text.
titleMaxLength 34 number

Ignores characters of title text after the specified number.
messageFontSize 13px string

Changes the font-size of the message text.
messageMaxLength 400 number

Ignores characters of message text after the specified number.
buttonFontSize 14px string

Changes the font-size of the button text.
buttonMaxLength 34 number

Ignores characters of button text after the specified number.
cssAnimation true boolean

Notiflix uses CSS animations to show/hide the Reports. If you don't want to use CSS animations you can set this option to false
cssAnimationDuration 360 number

Changes the CSS animations duration as milliseconds. Tip: 360 ms = 0.36 second.
cssAnimationStyle fade string

2 types of styles can use: fade and zoom

Report Success Options:

Option Default Type Description
svgColor #00b462 string

Changes the SVG icon color of Success.
titleColor #1e1e1e string

Changes the title text color of Success.
messageColor #242424 string

Changes the message text color of Success.
buttonBackground #00b462 string

Changes the button background color of Success.
buttonColor #fff string

Changes the button text color of Success.

Report Failure Options:

Option Default Type Description
svgColor #f44336 string

Changes the SVG icon color of Failure.
titleColor #1e1e1e string

Changes the title text color of Failure.
messageColor #242424 string

Changes the message text color of Failure.
buttonBackground #f44336 string

Changes the button background color of Failure.
buttonColor #fff string

Changes the button text color of Failure.

Report Warning Options:

Option Default Type Description
svgColor #f2bd1d string

Changes the SVG icon color of Warning.
titleColor #1e1e1e string

Changes the title text color of Warning.
messageColor #242424 string

Changes the message text color of Warning.
buttonBackground #f2bd1d string

Changes the button background color of Warning.
buttonColor #fff string

Changes the button text color of Warning.

Report Info Options:

Option Default Type Description
svgColor #00bcd4 string

Changes the SVG icon color of Info.
titleColor #1e1e1e string

Changes the title text color of Info.
messageColor #242424 string

Changes the message text color of Info.
buttonBackground #00bcd4 string

Changes the button background color of Info.
buttonColor #fff string

Changes the button text color of Info.

Notiflix.Report.Init({});

You can find the default options in an Init Function as below.

// Notiflix Report - All Options Notiflix.Report.Init({ className:'notiflix-report', width:'320px', backgroundColor:'#f8f8f8', borderRadius:'25px', rtl:false, zindex:4002, backOverlay:true, backOverlayColor:'rgba(0,0,0,0.5)', useGoogleFont:true, fontFamily:'Quicksand', svgSize:'110px', plainText:true, titleFontSize:'16px', titleMaxLength:34, messageFontSize:'13px', messageMaxLength:400, buttonFontSize:'14px', buttonMaxLength:34, cssAnimation:true, cssAnimationDuration:360, cssAnimationStyle:'fade', success: { svgColor:'#00b462', titleColor:'#1e1e1e', messageColor:'#242424', buttonBackground:'#00b462', buttonColor:'#fff', }, failure: { svgColor:'#f44336', titleColor:'#1e1e1e', messageColor:'#242424', buttonBackground:'#f44336', buttonColor:'#fff', }, warning: { svgColor:'#f2bd1d', titleColor:'#1e1e1e', messageColor:'#242424', buttonBackground:'#f2bd1d', buttonColor:'#fff', }, info: { svgColor:'#00bcd4', titleColor:'#1e1e1e', messageColor:'#242424', buttonBackground:'#00bcd4', buttonColor:'#fff', }, });

Notiflix.Report.Merge({});

You can deeply extend the Init Function by using Merge Function. Examples of use are as below.

Website
global.js (Entire Website) // Notiflix Report Init - global.js Notiflix.Report.Init({ svgSize:'90px', plainText:false, messageMaxLength:200, });
product.js (Product Page) // Notiflix Report Merge - product.js (The Merge Function, deeply extends the Global Init only for the Product Page.) Notiflix.Report.Merge({ plainText:true, messageMaxLength:300, });

Notiflix Confirm All Options

You can find all the options at the table below. You can click "Code View" tab to see usages of Init and Merge

Table View Code View
Option Default Type Description
className notiflix-confirm string

Changes the class name of the Confirm.
width 280px string

Changes the width. You can use "px" or "%"
zindex 4003 number

Changes the z-index.
position center string

6 types of positions you can use: center center-top right-top right-bottom left-top left-bottom
distance 10px string

Distance to body. You can use "px" or "%"
backgroundColor #f8f8f8 string

Changes the background color. You can use HEX, RGB or RGBA.
borderRadius 25px string

Changes the radius of the corners.
backOverlay false boolean

If you want to use a colored overlay you can change this option to true
backOverlayColor rgba(0,0,0,0.5) string

Changes the color of the overlay. You can use HEX, RGB or RGBA.
rtl false boolean

Specifies the text direction to "right-to-left"
useGoogleFont true boolean

Notiflix uses the "Quicksand" font-family via Google Fonts. If you already use the "Quicksand" font-family or you don't want to use it you can set this option to false
fontFamily Quicksand string

Changes the font-family.
cssAnimation true boolean

Notiflix uses CSS animations to show/hide the Confirm. If you don't want to use CSS animations you can set this option to false
cssAnimationStyle fade string

2 types of styles you can use: fade and zoom
cssAnimationDuration 300 number

Changes the CSS animations duration as milliseconds. Tip: 300 ms = 0.3 second.
titleColor #00b462 string

Changes the color of the title text.
titleFontSize 16px string

Changes the font-size of the title text.
titleMaxLength 34 number

Ignores characters of the title text after the specified number.
messageColor #1e1e1e string

Changes the color of the message text.
messageFontSize 14px string

Changes the font-size of the message text.
messageMaxLength 110 number

Ignores characters of the message text after the specified number.
buttonsFontSize 15px string

Changes the font-size of the buttons text.
buttonsMaxLength 34 number

Ignores characters of the buttons text after the specified number.
okButtonColor #f8f8f8 string

Changes the color of the OK button text.
okButtonBackground #00b462 string

Changes the background color of the OK button.
cancelButtonColor #f8f8f8 string

Changes the color of the CANCEL button text.
cancelButtonBackground #a9a9a9 string

Changes the background color of the CANCEL button.
plainText @1.3.0 true boolean

New Option: @1.3.0 and next versions
(@1.0.0 and next versions for React)
All text contents are PlainText. If you want use format to HTML you can change this option to false

Notiflix.Confirm.Init({});

You can find the default options in an Init Function as below.

// Notiflix Confirm - All Options Notiflix.Confirm.Init({ className:'notiflix-confirm', width:'280px', zindex:4003, position:'center', distance:'10px', backgroundColor:'#f8f8f8', borderRadius:'25px', backOverlay:true, backOverlayColor:'rgba(0,0,0,0.5)', rtl:false, useGoogleFont:true, fontFamily:'Quicksand', cssAnimation:true, cssAnimationStyle:'fade', cssAnimationDuration:300, titleColor:'#00b462', titleFontSize:'16px', titleMaxLength:34, messageColor:'#1e1e1e', messageFontSize:'14px', messageMaxLength:110, buttonsFontSize:'15px', buttonsMaxLength:34, okButtonColor:'#f8f8f8', okButtonBackground:'#00b462', cancelButtonColor:'#f8f8f8', cancelButtonBackground:'#a9a9a9', plainText:true, // New Option: @1.3.0 and next versions - (@1.0.0 and next versions for React) });

Notiflix.Confirm.Merge({});

You can deeply extend the Init Function by using Merge Function. Examples of use are as below.

Website
global.js (Entire Website) // Notiflix Confirm Init - global.js Notiflix.Confirm.Init({ width:'300px', useGoogleFont:false, fontFamily:'Arial', });
blog.js (Blog Page) // Notiflix Confirm Merge - blog.js (The Merge Function, deeply extends the Global Init only for the Blog Page.) Notiflix.Confirm.Merge({ fontFamily:'Tahoma', });

Notiflix Loading All Options

You can find all the options at the table below. You can click "Code View" tab to see usages of Init and Merge

Table View Code View
Option Default Type Description
className notiflix-loading string

Changes the class name of the Loading.
zindex 4000 number

Changes the z-index.
backgroundColor rgba(0,0,0,0.8) string

Changes the background color. You can use HEX, RGB or RGBA.
rtl false boolean

Specifies the text direction to "right-to-left".
useGoogleFont true boolean

Notiflix uses the "Quicksand" font-family via Google Fonts. If you already use the "Quicksand" font-family or you don't want to use it you can set this option to false
fontFamily Quicksand string

Changes the font-family.
cssAnimation true boolean

Notiflix uses CSS animations to show/hide the Loading. If you don't want to use CSS animations you can set this option to false
cssAnimationDuration 400 number

Changes the CSS animations duration as milliseconds. Tip: 400 ms = 0.4 second.
clickToClose false boolean

If you want to remove the Loading when its clicked you can set this option to true
customSvgUrl null string

If you want to use your own SVG Icon you can set the URL of SVG Icon as a string format. Usage: Notiflix.Loading.Custom();
svgSize 80px string

Changes the SVG Icons width and height. (Notiflix uses square scaled icons.)
svgColor #00b462 string

Changes the SVG Icons color. You can use HEX, RGB or RGBA.
messageID NotiflixLoadingMessage string

Changes the ID (attribute) of the message text.
messageFontSize 15px string

Changes the font-size of the message text.
messageMaxLength 34 number

Ignores characters of the message text after the specified number.
messageColor #dcdcdc string

Changes the color of the message text.

Notiflix.Loading.Init({});

You can find the default options in an Init Function as below.

// Notiflix Loading - All Options Notiflix.Loading.Init({ className:'notiflix-loading', zindex:4000, backgroundColor:'rgba(0,0,0,0.8)', rtl:false, useGoogleFont:true, fontFamily:'Quicksand', cssAnimation:true, cssAnimationDuration:400, clickToClose:false, customSvgUrl:null, svgSize:'80px', svgColor:'#00b462', messageID:'NotiflixLoadingMessage', messageFontSize:'15px', messageMaxLength:34, messageColor:'#dcdcdc', });

Notiflix.Loading.Merge({});

You can deeply extend the Init Function by using Merge Function. Examples of use are as below.

Website
global.js (Entire Website) // Notiflix Loading Init - global.js Notiflix.Loading.Init({ messageColor:'#fff', svgSize:'100px', clickToClose:true, });
about.js (About Page) // Notiflix Loading Merge - about.js (The Merge Function, deeply extends the Global Init only for the About Page.) Notiflix.Loading.Merge({ clickToClose:false, });

Notiflix Notify Generator

The options in the Generator tab modify only design changes. You may visit the Documentation tab for all other options.

Generate

Common Options:

width:

position:

right-top
right-top right-bottom left-top left-bottom

distance:

opacity:

borderRadius:

rtl:

false

backOverlay:

false

backOverlayColor:

useGoogleFont:

true

fontFamily:

fontSize:

closeButton:

false

useIcon:

true

useFontAwesome:

false

fontAwesomeIconStyle:

basic
basic shadow

fontAwesomeIconSize:

Success Options:

background:

textColor:

notiflixIconColor:

fontAwesomeClassName:

fontAwesomeIconColor:

Failure Options:

background:

textColor:

notiflixIconColor:

fontAwesomeClassName:

fontAwesomeIconColor:

Warning Options:

background:

textColor:

notiflixIconColor:

fontAwesomeClassName:

fontAwesomeIconColor:

Info Options:

background:

textColor:

notiflixIconColor:

fontAwesomeClassName:

fontAwesomeIconColor:

Preview

body
close
Notiflix Notify Success
close
Notiflix Notify Failure
close
Notiflix Notify Warning
close
Notiflix Notify Info

Get the code

Notiflix.Notify.Init({ });

Notiflix Report Generator

The options in the Generator tab modify tonly design changes. You may visit the Documentation tab for all other options.

Generate

Common Options:

width:

backgroundColor:

borderRadius:

rtl:

false

backOverlay:

true

backOverlayColor:

useGoogleFont:

true

fontFamily:

svgSize:

titleFontSize:

messageFontSize:

buttonFontSize:

Success Options:

svgColor:

titleColor:

messageColor:

buttonBackground:

buttonColor:

Failure Options:

svgColor:

titleColor:

messageColor:

buttonBackground:

buttonColor:

Warning Options:

svgColor:

titleColor:

messageColor:

buttonBackground:

buttonColor:

Info Options:

svgColor:

titleColor:

messageColor:

buttonBackground:

buttonColor:

Preview

body
  • Success
  • Failure
  • Warning
  • Info
Notiflix Success

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

- Albert Einstein

Okay
Notiflix Failure

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

- Henry Ford

Okay
Notiflix Warning

"The greatest war is the war against ignorance."

- Mustafa Kemal Ataturk

Okay
Notiflix Info

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

- Carl Gustav Jung

Okay

Get the code

Notiflix.Report.Init({ });

Notiflix Confirm Generator

The options in the Generator tab modify only design changes. You may visit the Documentation tab for all other options.

Generate

width:

position:

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

distance:

backgroundColor:

borderRadius:

backOverlay:

true

backOverlayColor:

rtl:

false

useGoogleFont:

true

fontFamily:

titleColor:

titleFontSize:

messageColor:

messageFontSize:

buttonsFontSize:

okButtonColor:

okButtonBackground:

cancelButtonColor:

cancelButtonBackground:

Preview

body
Notiflix Confirm

Do you agree with me?

Yes No

Get the code

Notiflix.Confirm.Init({ });

Notiflix Loading Generator

The options in the Generator tab modify only design changes. You may visit the Documentation tab for all other options.

Generate

svgSize:

backgroundColor:

useGoogleFont:

true

fontFamily:

customSvgUrl:

svgColor:

messageFontSize:

messageColor:

Preview

body
  • Standard
  • Hourglass
  • Circle
  • Arrows
  • Dots
  • Pulse
  • Custom

Your text

Your text

Your text

Your text

Your text

Your text

Notiflix

Your text

Get the code

Notiflix.Loading.Init({ });

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

Learn More I Accept
Get Contact
Captcha