Search in the documentation

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:

OptionTypeDefault ValueDescription
width
string280pxChanges the width of the notifications.
position
stringright-top7 types of positions can be used: right-top right-bottom left-top left-bottom center-top center-bottom center-center
distance
string10pxThe distance between positioned notifications and the body element.
opacity
number1Changes the opacity. (Between 0 and 1)
borderRadius
string5pxChanges the radius of the notifications corners.
rtl
booleanfalseSpecifies the text direction to "right-to-left".
timeout
number3000The delay in milliseconds to hide and remove the notifications.
messageMaxLength
number110The maximum length of the notifications message text.
backOverlay
booleanfalseAdds a background overlay to the notifications.
backOverlayColor
stringrgba(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
booleantrueStrips all HTML tags.
showOnlyTheLastOne
booleanfalseAuto-removes all the notifications except for the last one.
clickToClose
booleanfalseRemoves the notification when it has been clicked without waiting for the delay.
pauseOnHover
booleantrueAuto-remove functionality will be paused for each notification element when the pointer(mouse) enters on it.
ID
stringNotiflixNotifyChanges the ID (attribute) of the notifications.
className
stringnotiflix-notifyChanges the class name (attribute) of the notifications.
zindex
number4001Changes the z-index of the notifications.
fontFamily
stringQuicksandChanges the font-family of the notifications message text.
fontSize
string13pxChanges the font-size of the notifications message text.
cssAnimation
booleantrueEnables/disables CSS animations to show/hide the notifications.
cssAnimationDuration
number400Changes the CSS animations duration as milliseconds.
cssAnimationStyle
stringfade6 types of styles can be used: fade zoom from-right from-top from-bottom from-left
closeButton
booleanfalseAdds a close button/icon to the notifications. (Notifications with a close button won't disappear until they were clicked.)
useIcon
booleantrueAllows using built-in SVG or external FontAwesome icons in the notifications. (By default, built-in SVG icons have been defined.)
useFontAwesome
booleanfalseIgnores built-in SVG icons and allows to use of external FontAwesome icons.
fontAwesomeIconStyle
stringbasic2 types of styles can be used: basic shadow
fontAwesomeIconSize
string34pxChanges the font-size of the FontAwesome icons.

Success Options:

OptionTypeDefault ValueDescription
background
string#32c682Changes the background color.
textColor
string#fffChanges the text color.
childClassName
stringnotiflix-notify-successChanges the class name.
notiflixIconColor
stringrgba(0,0,0,0.2)Changes the SVG icon color.
fontAwesomeClassName
stringfas fa-check-circleChanges the FontAwesome icon class name (FontAwesome has to be added to the project separately.)
fontAwesomeIconColor
stringrgba(0,0,0,0.2)Changes the FontAwesome icon color.
backOverlayColor
stringrgba(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:

OptionTypeDefault ValueDescription
background
string#ff5549Changes the background color.
textColor
string#fffChanges the text color.
childClassName
stringnotiflix-notify-failureChanges the class name.
notiflixIconColor
stringrgba(0,0,0,0.2)Changes the SVG icon color.
fontAwesomeClassName
stringfas fa-times-circleChanges the FontAwesome icon class name (FontAwesome has to be added to the project separately.)
fontAwesomeIconColor
stringrgba(0,0,0,0.2)Changes the FontAwesome icon color.
backOverlayColor
stringrgba(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:

OptionTypeDefault ValueDescription
background
string#eebf31Changes the background color.
textColor
string#fffChanges the text color.
childClassName
stringnotiflix-notify-warningChanges the class name.
notiflixIconColor
stringrgba(0,0,0,0.2)Changes the SVG icon color.
fontAwesomeClassName
stringfas fa-exclamation-circleChanges the FontAwesome icon class name (FontAwesome has to be added to the project separately.)
fontAwesomeIconColor
stringrgba(0,0,0,0.2)Changes the FontAwesome icon color.
backOverlayColor
stringrgba(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:

OptionTypeDefault ValueDescription
background
string#26c0d3Changes the background color.
textColor
string#fffChanges the text color.
childClassName
stringnotiflix-notify-infoChanges the class name.
notiflixIconColor
stringrgba(0,0,0,0.2)Changes the SVG icon color.
fontAwesomeClassName
stringfas fa-info-circleChanges the FontAwesome icon class name (FontAwesome has to be added to the project separately.)
fontAwesomeIconColor
stringrgba(0,0,0,0.2)Changes the FontAwesome icon color.
backOverlayColor
stringrgba(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:

OptionTypeDefault ValueDescription
className
stringnotiflix-reportChanges the class name (attribute).
width
string320pxChanges the width.
backgroundColor
string#f8f8f8Changes the background color.
borderRadius
string25pxChanges the radius of the corners.
rtl
booleanfalseSpecifies the text direction to "right-to-left".
zindex
number4002Changes the z-index.
backOverlay
booleantrueAdds a background overlay.
backOverlayColor
stringrgba(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
booleanfalseRemoves the Report Notification when the background overlay element has been clicked. The "backOverlay" option has to be "true" as well.
fontFamily
stringQuicksandChanges the font-family.
svgSize
string110pxChanges the built-in SVG icons width and height. (Notiflix uses square scaled icons.)
plainText
booleantrueStrips all HTML tags.
titleFontSize
string16pxChanges the font-size of the title text.
titleMaxLength
number34The maximum length of the title text.
messageFontSize
string13pxChanges the font-size of the message text.
messageMaxLength
number400The maximum length of the message text.
buttonFontSize
string14pxChanges the font-size of the button text.
buttonMaxLength
number34The maximum length of the button text.
cssAnimation
booleantrueEnables/disables CSS animations to show/hide.
cssAnimationDuration
number360Changes the CSS animations duration as milliseconds.
cssAnimationStyle
stringfade2 types of styles can be used: fade zoom

Success Options:

OptionTypeDefault ValueDescription
svgColor
string#32c682Changes the built-in SVG icon color.
titleColor
string#1e1e1eChanges the title text color.
messageColor
string#242424Changes the message text color.
buttonBackground
string#32c682Changes the button background color.
buttonColor
string#fffChanges the button text color.
backOverlayColor
stringrgba(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:

OptionTypeDefault ValueDescription
svgColor
string#ff5549Changes the built-in SVG icon color.
titleColor
string#1e1e1eChanges the title text color.
messageColor
string#242424Changes the message text color.
buttonBackground
string#ff5549Changes the button background color.
buttonColor
string#fffChanges the button text color.
backOverlayColor
stringrgba(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:

OptionTypeDefault ValueDescription
svgColor
string#eebf31Changes the built-in SVG icon color.
titleColor
string#1e1e1eChanges the title text color.
messageColor
string#242424Changes the message text color.
buttonBackground
string#eebf31Changes the button background color.
buttonColor
string#fffChanges the button text color.
backOverlayColor
stringrgba(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:

OptionTypeDefault ValueDescription
svgColor
string#26c0d3Changes the built-in SVG icon color.
titleColor
string#1e1e1eChanges the title text color.
messageColor
string#242424Changes the message text color.
buttonBackground
string#26c0d3Changes the button background color.
buttonColor
string#fffChanges the button text color.
backOverlayColor
stringrgba(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:

OptionTypeDefault ValueDescription
className
stringnotiflix-confirmChanges the class name (attribute).
width
string300pxChanges the width.
zindex
number4003Changes the z-index.
position
stringcenter9 types of positions can be used: center center-top center-bottom right-top right-center right-bottom left-top left-center left-bottom
distance
string10pxThe distance between positioned confirm boxes and the body element.
backgroundColor
string#f8f8f8Changes the background color.
borderRadius
string25pxChanges the radius of the corners.
backOverlay
booleantrueAdds a background overlay.
backOverlayColor
stringrgba(0,0,0,0.5)Changes the color of the background overlay.
rtl
booleanfalseSpecifies the text direction to "right-to-left".
fontFamily
stringQuicksandChanges the font-family.
cssAnimation
booleantrueEnables/disables CSS animations to show/hide.
cssAnimationDuration
number300Changes the CSS animations duration as milliseconds.
cssAnimationStyle
stringfade2 types of styles can be used: fade zoom
plainText
booleantrueStrips all HTML tags.
titleColor
string#32c682Changes the color of the title text.
titleFontSize
string16pxChanges the font-size of the title text.
titleMaxLength
number34The maximum length of the title text.
messageColor
string#1e1e1eChanges the color of the message text.
messageFontSize
string14pxChanges the font-size of the message text.
messageMaxLength
number110The maximum length of the message text.
buttonsFontSize
string15pxChanges the font-size of the buttons text.
buttonsMaxLength
number34The maximum length of the buttons text.
okButtonColor
string#f8f8f8Changes the color of the OK button text.
okButtonBackground
string#32c682Changes the background color of the OK button.
cancelButtonColor
string#f8f8f8Changes the color of the Cancel button text.
cancelButtonBackground
string#a9a9a9Changes 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:

OptionTypeDefault ValueDescription
className
stringnotiflix-loadingChanges the class name (attribute).
zindex
number4000Changes the z-index.
backgroundColor
stringrgba(0,0,0,0.8)Changes the background color.
rtl
booleanfalseSpecifies the text direction to "right-to-left".
fontFamily
stringQuicksandChanges the font-family.
cssAnimation
booleantrueEnables/disables CSS animations to show/hide.
cssAnimationDuration
number400Changes the CSS animations duration as milliseconds.
clickToClose
booleanfalseRemoves the loading indicator when it has been clicked.
customSvgUrl
stringnullAn external SVG icon URL can be set. Usage: Notiflix.Loading.custom();
customSvgCodev3.2.0
stringnullA text-based (string) SVG icon can be set. Single quotation marks should be avoided. Usage: Notiflix.Loading.custom();
svgSize
string80pxChanges the built-in SVG icons width and height. (Notiflix uses square scaled icons.)
svgColor
string#32c682Changes the built-in SVG icons color.
messageID
stringNotiflixLoadingMessageChanges the ID (attribute) of the loading message element.
messageFontSize
string15pxChanges the font-size of the loading message text.
messageMaxLength
number34The maximum length of the loading message text.
messageColor
string#dcdcdcChanges 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:

OptionTypeDefault ValueDescription
querySelectorLimit
number200Limit of the CSS selector(s) or "Array<HTMLElement>" or "NodeListOf<HTMLElement>" length.
className
stringnotiflix-blockChanges the class name (attribute) of the block indicator/message elements wrapper.
position
stringabsoluteChanges the position of the block indicator/message elements wrapper.
zindex
number1000Changes the z-index of the block indicator/message elements wrapper.
backgroundColor
stringrgba(255,255,255,0.9)Changes the background color the block indicator/message elements wrapper.
rtl
booleanfalseSpecifies the text direction to "right-to-left".
fontFamily
stringQuicksandChanges the font-family.
cssAnimation
booleantrueEnables/disables CSS animations to show/hide.
cssAnimationDuration
number300Changes the CSS animations duration as milliseconds.
svgSize
string45pxChanges the built-in SVG icons width and height. (Notiflix uses square scaled icons.)
svgColor
string#383838Changes the built-in SVG icons color.
messageFontSize
string14pxChanges the font-size of the block message text.
messageMaxLength
number34The maximum length of the block message text.
messageColor
string#383838Changes 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,});