Notiflix Notify: All Options
All the options can be found in the table below. The "Code View" tab can be switched to see the usages of init and merge functions.
Common Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
width | string | 280px | Changes the width of the notifications. |
position | string | right-top | 7 types of positions can be used: right-top right-bottom left-top left-bottom center-top center-bottom center-center |
distance | string | 10px | The distance between positioned notifications and the body element. |
opacity | number | 1 | Changes the opacity. (Between 0 and 1) |
borderRadius | string | 5px | Changes the radius of the notifications corners. |
rtl | boolean | false | Specifies the text direction to "right-to-left". |
timeout | number | 3000 | The delay in milliseconds to hide and remove the notifications. |
messageMaxLength | number | 110 | The maximum length of the notifications message text. |
backOverlay | boolean | false | Adds a background overlay to the notifications. |
backOverlayColor | string | rgba(0,0,0,0.5) | Changes the color of the background overlay. (Only if the notification type-based "backOverlayColor" option is an empty string.) |
plainText | boolean | true | Strips all HTML tags. |
showOnlyTheLastOne | boolean | false | Auto-removes all the notifications except for the last one. |
clickToClose | boolean | false | Removes the notification when it has been clicked without waiting for the delay. |
pauseOnHover | boolean | true | Auto-remove functionality will be paused for each notification element when the pointer(mouse) enters on it. |
ID | string | NotiflixNotify | Changes the ID (attribute) of the notifications. |
className | string | notiflix-notify | Changes the class name (attribute) of the notifications. |
zindex | number | 4001 | Changes the z-index of the notifications. |
fontFamily | string | Quicksand | Changes the font-family of the notifications message text. |
fontSize | string | 13px | Changes the font-size of the notifications message text. |
cssAnimation | boolean | true | Enables/disables CSS animations to show/hide the notifications. |
cssAnimationDuration | number | 400 | Changes the CSS animations duration as milliseconds. |
cssAnimationStyle | string | fade | 6 types of styles can be used: fade zoom from-right from-top from-bottom from-left |
closeButton | boolean | false | Adds a close button/icon to the notifications. (Notifications with a close button won't disappear until they were clicked.) |
useIcon | boolean | true | Allows using built-in SVG or external FontAwesome icons in the notifications. (By default, built-in SVG icons have been defined.) |
useFontAwesome | boolean | false | Ignores built-in SVG icons and allows to use of external FontAwesome icons. |
fontAwesomeIconStyle | string | basic | 2 types of styles can be used: basic shadow |
fontAwesomeIconSize | string | 34px | Changes the font-size of the FontAwesome icons. |
Success Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
background | string | #32c682 | Changes the background color. |
textColor | string | #fff | Changes the text color. |
childClassName | string | notiflix-notify-success | Changes the class name. |
notiflixIconColor | string | rgba(0,0,0,0.2) | Changes the SVG icon color. |
fontAwesomeClassName | string | fas fa-check-circle | Changes the FontAwesome icon class name (FontAwesome has to be added to the project separately.) |
fontAwesomeIconColor | string | rgba(0,0,0,0.2) | Changes the FontAwesome icon color. |
backOverlayColor | string | rgba(50,198,130,0.2) | Changes the color of the background overlay. (Overrides the common "backOverlayColor" option for this notification type. This one can be set as an empty string to use the common one.) |
Failure Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
background | string | #ff5549 | Changes the background color. |
textColor | string | #fff | Changes the text color. |
childClassName | string | notiflix-notify-failure | Changes the class name. |
notiflixIconColor | string | rgba(0,0,0,0.2) | Changes the SVG icon color. |
fontAwesomeClassName | string | fas fa-times-circle | Changes the FontAwesome icon class name (FontAwesome has to be added to the project separately.) |
fontAwesomeIconColor | string | rgba(0,0,0,0.2) | Changes the FontAwesome icon color. |
backOverlayColor | string | rgba(255,85,73,0.2) | Changes the color of the background overlay. (Overrides the common "backOverlayColor" option for this notification type. This one can be set as an empty string to use the common one.) |
Warning Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
background | string | #eebf31 | Changes the background color. |
textColor | string | #fff | Changes the text color. |
childClassName | string | notiflix-notify-warning | Changes the class name. |
notiflixIconColor | string | rgba(0,0,0,0.2) | Changes the SVG icon color. |
fontAwesomeClassName | string | fas fa-exclamation-circle | Changes the FontAwesome icon class name (FontAwesome has to be added to the project separately.) |
fontAwesomeIconColor | string | rgba(0,0,0,0.2) | Changes the FontAwesome icon color. |
backOverlayColor | string | rgba(238,191,49,0.2) | Changes the color of the background overlay. (Overrides the common "backOverlayColor" option for this notification type. This one can be set as an empty string to use the common one.) |
Info Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
background | string | #26c0d3 | Changes the background color. |
textColor | string | #fff | Changes the text color. |
childClassName | string | notiflix-notify-info | Changes the class name. |
notiflixIconColor | string | rgba(0,0,0,0.2) | Changes the SVG icon color. |
fontAwesomeClassName | string | fas fa-info-circle | Changes the FontAwesome icon class name (FontAwesome has to be added to the project separately.) |
fontAwesomeIconColor | string | rgba(0,0,0,0.2) | Changes the FontAwesome icon color. |
backOverlayColor | string | rgba(38,192,211,0.2) | Changes the color of the background overlay. (Overrides the common "backOverlayColor" option for this notification type. This one can be set as an empty string to use the common one.) |
Notiflix.Notify.init({});
The "init()" function can be used to set custom options as globally.
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,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: 'notiflix-notify-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: 'notiflix-notify-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: 'notiflix-notify-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: 'notiflix-notify-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)',},});Notiflix.Notify.merge({});
The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Website
global.js (global scripts)
Notiflix.Notify.init({width: '300px',position: 'right-bottom',closeButton: false,});contact.js (contact page scripts)
Notiflix.Notify.merge({closeButton: true,});Notiflix Report: All Options
All the options can be found in the table below. The "Code View" tab can be switched to see the usages of init and merge functions.
Common Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
className | string | notiflix-report | Changes the class name (attribute). |
width | string | 320px | Changes the width. |
backgroundColor | string | #f8f8f8 | Changes the background color. |
borderRadius | string | 25px | Changes the radius of the corners. |
rtl | boolean | false | Specifies the text direction to "right-to-left". |
zindex | number | 4002 | Changes the z-index. |
backOverlay | boolean | true | Adds a background overlay. |
backOverlayColor | string | rgba(0,0,0,0.5) | Changes the color of the background overlay. (Only if the report type-based "backOverlayColor" option is an empty string.) |
backOverlayClickToClosev3.2.5 | boolean | false | Removes the Report Notification when the background overlay element has been clicked. The "backOverlay" option has to be "true" as well. |
fontFamily | string | Quicksand | Changes the font-family. |
svgSize | string | 110px | Changes the built-in SVG icons width and height. (Notiflix uses square scaled icons.) |
plainText | boolean | true | Strips all HTML tags. |
titleFontSize | string | 16px | Changes the font-size of the title text. |
titleMaxLength | number | 34 | The maximum length of the title text. |
messageFontSize | string | 13px | Changes the font-size of the message text. |
messageMaxLength | number | 400 | The maximum length of the message text. |
buttonFontSize | string | 14px | Changes the font-size of the button text. |
buttonMaxLength | number | 34 | The maximum length of the button text. |
cssAnimation | boolean | true | Enables/disables CSS animations to show/hide. |
cssAnimationDuration | number | 360 | Changes the CSS animations duration as milliseconds. |
cssAnimationStyle | string | fade | 2 types of styles can be used: fade zoom |
Success Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
svgColor | string | #32c682 | Changes the built-in SVG icon color. |
titleColor | string | #1e1e1e | Changes the title text color. |
messageColor | string | #242424 | Changes the message text color. |
buttonBackground | string | #32c682 | Changes the button background color. |
buttonColor | string | #fff | Changes the button text color. |
backOverlayColor | string | rgba(50,198,130,0.2) | Changes the color of the background overlay. (Overrides the common "backOverlayColor" option for this report type. This one can be set as an empty string to use the common one.) |
Failure Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
svgColor | string | #ff5549 | Changes the built-in SVG icon color. |
titleColor | string | #1e1e1e | Changes the title text color. |
messageColor | string | #242424 | Changes the message text color. |
buttonBackground | string | #ff5549 | Changes the button background color. |
buttonColor | string | #fff | Changes the button text color. |
backOverlayColor | string | rgba(255,85,73,0.2) | Changes the color of the background overlay. (Overrides the common "backOverlayColor" option for this report type. This one can be set as an empty string to use the common one.) |
Warning Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
svgColor | string | #eebf31 | Changes the built-in SVG icon color. |
titleColor | string | #1e1e1e | Changes the title text color. |
messageColor | string | #242424 | Changes the message text color. |
buttonBackground | string | #eebf31 | Changes the button background color. |
buttonColor | string | #fff | Changes the button text color. |
backOverlayColor | string | rgba(238,191,49,0.2) | Changes the color of the background overlay. (Overrides the common "backOverlayColor" option for this report type. This one can be set as an empty string to use the common one.) |
Info Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
svgColor | string | #26c0d3 | Changes the built-in SVG icon color. |
titleColor | string | #1e1e1e | Changes the title text color. |
messageColor | string | #242424 | Changes the message text color. |
buttonBackground | string | #26c0d3 | Changes the button background color. |
buttonColor | string | #fff | Changes the button text color. |
backOverlayColor | string | rgba(38,192,211,0.2) | Changes the color of the background overlay. (Overrides the common "backOverlayColor" option for this report type. This one can be set as an empty string to use the common one.) |
Notiflix.Report.init({});
The "init()" function can be used to set custom options as globally.
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)',backOverlayClickToClose: 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)',},});Notiflix.Report.merge({});
The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Website
global.js (global scripts)
Notiflix.Report.init({width: '300px',messageMaxLength: 1923,plainText: true,});contact.js (contact page scripts)
Notiflix.Report.merge({plainText: false,});Notiflix Confirm: All Options
All the options can be found in the table below. The "Code View" tab can be switched to see the usages of init and merge functions.
Common Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
className | string | notiflix-confirm | Changes the class name (attribute). |
width | string | 300px | Changes the width. |
zindex | number | 4003 | Changes the z-index. |
position | string | center | 9 types of positions can be used: center center-top center-bottom right-top right-center right-bottom left-top left-center left-bottom |
distance | string | 10px | The distance between positioned confirm boxes and the body element. |
backgroundColor | string | #f8f8f8 | Changes the background color. |
borderRadius | string | 25px | Changes the radius of the corners. |
backOverlay | boolean | true | Adds a background overlay. |
backOverlayColor | string | rgba(0,0,0,0.5) | Changes the color of the background overlay. |
rtl | boolean | false | Specifies the text direction to "right-to-left". |
fontFamily | string | Quicksand | Changes the font-family. |
cssAnimation | boolean | true | Enables/disables CSS animations to show/hide. |
cssAnimationDuration | number | 300 | Changes the CSS animations duration as milliseconds. |
cssAnimationStyle | string | fade | 2 types of styles can be used: fade zoom |
plainText | boolean | true | Strips all HTML tags. |
titleColor | string | #32c682 | Changes the color of the title text. |
titleFontSize | string | 16px | Changes the font-size of the title text. |
titleMaxLength | number | 34 | The maximum length of the title text. |
messageColor | string | #1e1e1e | Changes the color of the message text. |
messageFontSize | string | 14px | Changes the font-size of the message text. |
messageMaxLength | number | 110 | The maximum length of the message text. |
buttonsFontSize | string | 15px | Changes the font-size of the buttons text. |
buttonsMaxLength | number | 34 | The maximum length of the buttons text. |
okButtonColor | string | #f8f8f8 | Changes the color of the OK button text. |
okButtonBackground | string | #32c682 | Changes the background color of the OK button. |
cancelButtonColor | string | #f8f8f8 | Changes the color of the Cancel button text. |
cancelButtonBackground | string | #a9a9a9 | Changes the background color of the Cancel button. |
Notiflix.Confirm.init({});
The "init()" function can be used to set custom options as globally.
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,fontFamily: 'Quicksand',cssAnimation: true,cssAnimationDuration: 300,cssAnimationStyle: 'fade',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',});Notiflix.Confirm.merge({});
The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Website
global.js (global scripts)
Notiflix.Confirm.init({width: '320px',messageMaxLength: 1923,plainText: true,});contact.js (contact page scripts)
Notiflix.Confirm.merge({plainText: false,});Notiflix Loading: All Options
All the options can be found in the table below. The "Code View" tab can be switched to see the usages of init and merge functions.
Common Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
className | string | notiflix-loading | Changes the class name (attribute). |
zindex | number | 4000 | Changes the z-index. |
backgroundColor | string | rgba(0,0,0,0.8) | Changes the background color. |
rtl | boolean | false | Specifies the text direction to "right-to-left". |
fontFamily | string | Quicksand | Changes the font-family. |
cssAnimation | boolean | true | Enables/disables CSS animations to show/hide. |
cssAnimationDuration | number | 400 | Changes the CSS animations duration as milliseconds. |
clickToClose | boolean | false | Removes the loading indicator when it has been clicked. |
customSvgUrl | string | null | An external SVG icon URL can be set. Usage: Notiflix.Loading.custom(); |
customSvgCodev3.2.0 | string | null | A text-based (string) SVG icon can be set. Single quotation marks should be avoided. Usage: Notiflix.Loading.custom(); |
svgSize | string | 80px | Changes the built-in SVG icons width and height. (Notiflix uses square scaled icons.) |
svgColor | string | #32c682 | Changes the built-in SVG icons color. |
messageID | string | NotiflixLoadingMessage | Changes the ID (attribute) of the loading message element. |
messageFontSize | string | 15px | Changes the font-size of the loading message text. |
messageMaxLength | number | 34 | The maximum length of the loading message text. |
messageColor | string | #dcdcdc | Changes the color of the loading message text. |
Notiflix.Loading.init({});
The "init()" function can be used to set custom options as globally.
Notiflix.Loading.init({className: 'notiflix-loading',zindex: 4000,backgroundColor: 'rgba(0,0,0,0.8)',rtl: false,fontFamily: 'Quicksand',cssAnimation: true,cssAnimationDuration: 400,clickToClose: false,customSvgUrl: null,customSvgCode: null,svgSize: '80px',svgColor: '#32c682',messageID: 'NotiflixLoadingMessage',messageFontSize: '15px',messageMaxLength: 34,messageColor: '#dcdcdc',});Notiflix.Loading.merge({});
The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Website
global.js (global scripts)
Notiflix.Loading.init({backgroundColor: 'rgba(0,0,0,0.9)',svgColor: '#fff',clickToClose: false,});contact.js (contact page scripts)
Notiflix.Loading.merge({clickToClose: true,});Notiflix Block: All Options
All the options can be found in the table below. The "Code View" tab can be switched to see the usages of init and merge functions.
Common Options:
| Option | Type | Default Value | Description |
|---|---|---|---|
querySelectorLimit | number | 200 | Limit of the CSS selector(s) or "Array<HTMLElement>" or "NodeListOf<HTMLElement>" length. |
className | string | notiflix-block | Changes the class name (attribute) of the block indicator/message elements wrapper. |
position | string | absolute | Changes the position of the block indicator/message elements wrapper. |
zindex | number | 1000 | Changes the z-index of the block indicator/message elements wrapper. |
backgroundColor | string | rgba(255,255,255,0.9) | Changes the background color the block indicator/message elements wrapper. |
rtl | boolean | false | Specifies the text direction to "right-to-left". |
fontFamily | string | Quicksand | Changes the font-family. |
cssAnimation | boolean | true | Enables/disables CSS animations to show/hide. |
cssAnimationDuration | number | 300 | Changes the CSS animations duration as milliseconds. |
svgSize | string | 45px | Changes the built-in SVG icons width and height. (Notiflix uses square scaled icons.) |
svgColor | string | #383838 | Changes the built-in SVG icons color. |
messageFontSize | string | 14px | Changes the font-size of the block message text. |
messageMaxLength | number | 34 | The maximum length of the block message text. |
messageColor | string | #383838 | Changes the color of the block message text. |
Notiflix.Block.init({});
The "init()" function can be used to set custom options as globally.
Notiflix.Block.init({querySelectorLimit: 200,className: 'notiflix-block',position: 'absolute',zindex: 1000,backgroundColor: 'rgba(255,255,255,0.9)',rtl: false,fontFamily: 'Quicksand',cssAnimation: true,cssAnimationDuration: 300,svgSize: '45px',svgColor: '#383838',messageFontSize: '14px',messageMaxLength: 34,messageColor: '#383838',});Notiflix.Block.merge({});
The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Website
global.js (global scripts)
Notiflix.Block.init({backgroundColor: 'rgba(0,0,0,0.9)',svgColor: '#f8f8f8',messageMaxLength: 19,});contact.js (contact page scripts)
Notiflix.Block.merge({messageMaxLength: 23,});