Success Options:
fontAwesomeClassName:
Failure Options:
fontAwesomeClassName:
Warning Options:
fontAwesomeClassName:
Option | Default | Type | Description |
---|
You can find all the options at the table below. You can click "Code View" tab to see usages of Init and Merge
Option | Default | Type | Description |
---|---|---|---|
width | 280px | string | Changes the width. You can use "px" or "%" |
position | right-top | string | 7 types of positions you can use: right-top right-bottom left-top left-bottom center-top center-bottom center-center |
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 back overlay. You can use HEX, RGB or RGBA. |
plainText | true | boolean | All text contents are PlainText. If you want use format to HTML you can change this option to false |
showOnlyTheLastOne | false | boolean | You can change this option as true to show only the last notification in the Notify module. |
clickToClose | false | boolean | You can change this option as true to remove each notification without waiting for it to be automatically removed when it has been clicked. |
pauseOnHover v2.7.0 | true | boolean | Auto-remove functionality will be paused for each notification element when the pointer(mouse) enters the notification if this option has been set as true. |
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 | false | boolean | The "Quicksand" font-family can be used via Google Fonts. If you want to use it you can set this option as true |
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. |
Option | Default | Type | Description |
---|---|---|---|
background | #32c682 | 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. |
backOverlayColor v2.2.0 | rgba(50,198,130,0.2) | string | Changes the color of the back overlay. You can use HEX, RGB or RGBA. (Overrides the common "backOverlayColor" option for this type.) |
Option | Default | Type | Description |
---|---|---|---|
background | #ff5549 | 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. |
backOverlayColor v2.2.0 | rgba(255,85,73,0.2) | string | Changes the color of the back overlay. You can use HEX, RGB or RGBA. (Overrides the common "backOverlayColor" option for this type.) |
Option | Default | Type | Description |
---|---|---|---|
background | #eebf31 | 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. |
backOverlayColor v2.2.0 | rgba(238,191,49,0.2) | string | Changes the color of the back overlay. You can use HEX, RGB or RGBA. (Overrides the common "backOverlayColor" option for this type.) |
Option | Default | Type | Description |
---|---|---|---|
background | #26c0d3 | 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. |
backOverlayColor v2.2.0 | rgba(38,192,211,0.2) | string | Changes the color of the back overlay. You can use HEX, RGB or RGBA. (Overrides the common "backOverlayColor" option for this type.) |
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)',
plainText:true,
showOnlyTheLastOne:false,
clickToClose:false,
pauseOnHover:true,
ID:'NotiflixNotify',
className:'notiflix-notify',
zindex:4001,
useGoogleFont:false,
fontFamily:'Quicksand',
fontSize:'13px',
cssAnimation:true,
cssAnimationDuration:400,
cssAnimationStyle:'fade',
closeButton:false,
useIcon:true,
useFontAwesome:false,
fontAwesomeIconStyle:'basic',
fontAwesomeIconSize:'34px',
success: {
background:'#32c682',
textColor:'#fff',
childClassName:'success',
notiflixIconColor:'rgba(0,0,0,0.2)',
fontAwesomeClassName:'fas fa-check-circle',
fontAwesomeIconColor:'rgba(0,0,0,0.2)',
backOverlayColor:'rgba(50,198,130,0.2)',
},
failure: {
background:'#ff5549',
textColor:'#fff',
childClassName:'failure',
notiflixIconColor:'rgba(0,0,0,0.2)',
fontAwesomeClassName:'fas fa-times-circle',
fontAwesomeIconColor:'rgba(0,0,0,0.2)',
backOverlayColor:'rgba(255,85,73,0.2)',
},
warning: {
background:'#eebf31',
textColor:'#fff',
childClassName:'warning',
notiflixIconColor:'rgba(0,0,0,0.2)',
fontAwesomeClassName:'fas fa-exclamation-circle',
fontAwesomeIconColor:'rgba(0,0,0,0.2)',
backOverlayColor:'rgba(238,191,49,0.2)',
},
info: {
background:'#26c0d3',
textColor:'#fff',
childClassName:'info',
notiflixIconColor:'rgba(0,0,0,0.2)',
fontAwesomeClassName:'fas fa-info-circle',
fontAwesomeIconColor:'rgba(0,0,0,0.2)',
backOverlayColor:'rgba(38,192,211,0.2)',
},
});
You can deeply extend the Init Function by using Merge Function. Examples of use are as below.
// Notiflix Notify Init - global.js
Notiflix.Notify.Init({
width:'300px',
fontSize:'14px',
timeout:4000,
messageMaxLength:200,
});
// 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',
});
You can find all the options at the table below. You can click "Code View" tab to see usages of Init and Merge
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 back overlay. You can use HEX, RGB or RGBA. |
useGoogleFont | false | boolean | The "Quicksand" font-family can be used via Google Fonts. If you want to use it you can set this option as true |
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 |
Option | Default | Type | Description |
---|---|---|---|
svgColor | #32c682 | 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 | #32c682 | string | Changes the button background color of Success. |
buttonColor | #fff | string | Changes the button text color of Success. |
backOverlayColor v2.2.0 | rgba(50,198,130,0.2) | string | Changes the color of the back overlay. You can use HEX, RGB or RGBA. (Overrides the common "backOverlayColor" option for this type.) |
Option | Default | Type | Description |
---|---|---|---|
svgColor | #ff5549 | 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 | #ff5549 | string | Changes the button background color of Failure. |
buttonColor | #fff | string | Changes the button text color of Failure. |
backOverlayColor v2.2.0 | rgba(255,85,73,0.2) | string | Changes the color of the back overlay. You can use HEX, RGB or RGBA. (Overrides the common "backOverlayColor" option for this type.) |
Option | Default | Type | Description |
---|---|---|---|
svgColor | #eebf31 | 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 | #eebf31 | string | Changes the button background color of Warning. |
buttonColor | #fff | string | Changes the button text color of Warning. |
backOverlayColor v2.2.0 | rgba(238,191,49,0.2) | string | Changes the color of the back overlay. You can use HEX, RGB or RGBA. (Overrides the common "backOverlayColor" option for this type.) |
Option | Default | Type | Description |
---|---|---|---|
svgColor | #26c0d3 | 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 | #26c0d3 | string | Changes the button background color of Info. |
buttonColor | #fff | string | Changes the button text color of Info. |
backOverlayColor v2.2.0 | rgba(38,192,211,0.2) | string | Changes the color of the back overlay. You can use HEX, RGB or RGBA. (Overrides the common "backOverlayColor" option for this type.) |
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:false,
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:'#32c682',
titleColor:'#1e1e1e',
messageColor:'#242424',
buttonBackground:'#32c682',
buttonColor:'#fff',
backOverlayColor:'rgba(50,198,130,0.2)',
},
failure: {
svgColor:'#ff5549',
titleColor:'#1e1e1e',
messageColor:'#242424',
buttonBackground:'#ff5549',
buttonColor:'#fff',
backOverlayColor:'rgba(255,85,73,0.2)',
},
warning: {
svgColor:'#eebf31',
titleColor:'#1e1e1e',
messageColor:'#242424',
buttonBackground:'#eebf31',
buttonColor:'#fff',
backOverlayColor:'rgba(238,191,49,0.2)',
},
info: {
svgColor:'#26c0d3',
titleColor:'#1e1e1e',
messageColor:'#242424',
buttonBackground:'#26c0d3',
buttonColor:'#fff',
backOverlayColor:'rgba(38,192,211,0.2)',
},
});
You can deeply extend the Init Function by using Merge Function. Examples of use are as below.
// Notiflix Report Init - global.js
Notiflix.Report.Init({
svgSize:'90px',
plainText:false,
messageMaxLength:200,
});
// 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,
});
You can find all the options at the table below. You can click "Code View" tab to see usages of Init and Merge
Option | Default | Type | Description |
---|---|---|---|
className | notiflix-confirm | string | Changes the class name of the Confirm. |
width | 300px | 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 center-bottom right-center left-center |
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 back overlay. You can use HEX, RGB or RGBA. |
rtl | false | boolean | Specifies the text direction to "right-to-left" |
useGoogleFont | false | boolean | The "Quicksand" font-family can be used via Google Fonts. If you want to use it you can set this option as true |
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. |
plainText | true | boolean | All text contents are PlainText. If you want use format to HTML you can change this option to false |
titleColor | #32c682 | 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 | #32c682 | 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. |
You can find the default options in an Init Function as below.
// Notiflix Confirm - All Options
Notiflix.Confirm.Init({
className:'notiflix-confirm',
width:'300px',
zindex:4003,
position:'center',
distance:'10px',
backgroundColor:'#f8f8f8',
borderRadius:'25px',
backOverlay:true,
backOverlayColor:'rgba(0,0,0,0.5)',
rtl:false,
useGoogleFont:false,
fontFamily:'Quicksand',
cssAnimation:true,
cssAnimationStyle:'fade',
cssAnimationDuration:300,
plainText:true,
titleColor:'#32c682',
titleFontSize:'16px',
titleMaxLength:34,
messageColor:'#1e1e1e',
messageFontSize:'14px',
messageMaxLength:110,
buttonsFontSize:'15px',
buttonsMaxLength:34,
okButtonColor:'#f8f8f8',
okButtonBackground:'#32c682',
cancelButtonColor:'#f8f8f8',
cancelButtonBackground:'#a9a9a9',
});
You can deeply extend the Init Function by using Merge Function. Examples of use are as below.
// Notiflix Confirm Init - global.js
Notiflix.Confirm.Init({
width:'300px',
useGoogleFont:true,
fontFamily:'Quicksand',
});
// Notiflix Confirm Merge - blog.js (The Merge Function, deeply extends the Global Init only for the Blog Page.)
Notiflix.Confirm.Merge({
fontFamily:'Tahoma',
});
You can find all the options at the table below. You can click "Code View" tab to see usages of Init and Merge
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 | false | boolean | The "Quicksand" font-family can be used via Google Fonts. If you want to use it you can set this option as true |
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 | #32c682 | 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. |
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:false,
fontFamily:'Quicksand',
cssAnimation:true,
cssAnimationDuration:400,
clickToClose:false,
customSvgUrl:null,
svgSize:'80px',
svgColor:'#32c682',
messageID:'NotiflixLoadingMessage',
messageFontSize:'15px',
messageMaxLength:34,
messageColor:'#dcdcdc',
});
You can deeply extend the Init Function by using Merge Function. Examples of use are as below.
// Notiflix Loading Init - global.js
Notiflix.Loading.Init({
messageColor:'#fff',
svgSize:'100px',
clickToClose:true,
});
// Notiflix Loading Merge - about.js (The Merge Function, deeply extends the Global Init only for the About Page.)
Notiflix.Loading.Merge({
clickToClose:false,
});
You can find all the options at the table below. You can click "Code View" tab to see usages of Init and Merge
Option | Default | Type | Description |
---|---|---|---|
querySelectorLimit | 200 | number | Limit of the query selector NodeList length. |
className | notiflix-block | string | Changes the class name of the Block module elements. |
position | absolute | string | Changes the position of the Block module elements. |
zindex | 1000 | number | Changes the z-index. |
backgroundColor | rgba(255,255,255,0.9) | string | Changes the background color. You can use HEX, RGB or RGBA. |
rtl | false | boolean | Specifies the text direction to "right-to-left". |
useGoogleFont | false | boolean | The "Quicksand" font-family can be used via Google Fonts. If you want to use it you can set this option as true |
fontFamily | Quicksand | string | Changes the font-family. |
cssAnimation | true | boolean | Notiflix uses CSS animations to show/hide the Block module elements. If you don't want to use CSS animations you can set this option to false |
cssAnimationDuration | 300 | number | Changes the CSS animations duration as milliseconds. Tip: 300 ms = 0.3 second. |
svgSize | 45px | string | Changes the SVG Icons width and height. (Notiflix uses square scaled icons.) |
svgColor | #383838 | string | Changes the SVG Icons color. You can use HEX, RGB or RGBA. |
messageFontSize | 14px | string | Changes the font-size of the message text. |
messageMaxLength | 34 | number | Ignores characters of the message text after the specified number. |
messageColor | #383838 | string | Changes the color of the message text. |
You can find the default options in an Init Function as below.
// Notiflix Block - All Options
Notiflix.Block.Init({
querySelectorLimit:200,
className:'notiflix-block',
position:'absolute',
zindex:1000,
backgroundColor:'rgba(255,255,255,0.9)',
rtl:false,
useGoogleFont:false,
fontFamily:'Quicksand',
cssAnimation:true,
cssAnimationDuration:300,
svgSize:'45px',
svgColor:'#383838',
messageFontSize:'13px',
messageMaxLength:34,
messageColor:'#383838',
});
You can deeply extend the Init Function by using Merge Function. Examples of use are as below.
// Notiflix Block Init - global.js
Notiflix.Block.Init({
backgroundColor:'rgba(0,0,0,0.75)',
messageColor:'#fff',
svgSize:'100px',
});
// Notiflix Block Merge - dashboard.js (The Merge Function, deeply extends the Global Init only for the Dashboard Page.)
Notiflix.Block.Merge({
svgSize:'50px',
});
The options in the Generator tab modify only design changes. You may visit the Documentation tab for all other options.
The options in the Generator tab modify tonly design changes. You may visit the Documentation tab for all other options.
The options in the Generator tab modify only design changes. You may visit the Documentation tab for all other options.
The options in the Generator tab modify only design changes. You may visit the Documentation tab for all other options.