Notiflix Block module can be used to block/unblock the elements during a process (Fetch/XHR), without locking the browser or the other elements/components to prevent the user’s interactions on the blocked elements.
import { Block } from 'notiflix/build/notiflix-block-aio';(B1) Block Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-block-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>@param1 {string | Array<HTMLElement> | NodeListOf<HTMLElement>}: Required, CSS selector(s) that matches the element(s) | Array of HTMLElments | NodeListOf HTMLElments to block.@param2 {string | Object}: Optional, a blocking message in string format. Or, extending the initialize options with the new options for each block element.@param3 {Object}: Optional, extending the initialize options with new the options for each block element. (If the second parameter has been already used for a blocking message.)Only indicatorsBlock.standard('.js-element');Block.hourglass('.js-element');Block.circle('.js-element');Block.arrows('.js-element');Block.dots('.js-element');Block.pulse('.js-element');Indicator with a blocking messageBlock.standard('.js-element', 'Please wait...');Only indicator with the new optionsBlock.standard('.js-element', {cssAnimationDuration: 1881,svgSize: '19px',});Indicator with a blocking message, and the new optionsBlock.standard('.js-element', 'Please wait...', {backgroundColor: 'rgba(0,0,0,0.8)',});Unblock the element(s) if already has been blocked.
@param1 {string | Array<HTMLElement> | NodeListOf<HTMLElement>}: Required, CSS selector(s) that matches the element(s) | Array of HTMLElments | NodeListOf HTMLElments to unblock.@param2 {number}: Optional, milliseconds for delaying in number format.Unblock immediatelyBlock.remove('.js-element');Unblock after delay => e.g. 1923msBlock.remove('.js-element', 1923);A blocking indicator type can be chosen for the demonstration.
...
Prioritize who you are, who you want to be and don’t spend time with anything that antagonizes your character.
Be brave, take the hill, but first answer that question: What’s my hill?
So first we have to define success for ourselves. And then we have to put in the work to maintain it. Make that daily tally. Tend to our garden. Keep the things that are important to us in good shape.
...
Notiflix Block module can be used to block/unblock the elements during a process (Fetch/XHR), without locking the browser or the other elements/components to prevent the user’s interactions on the blocked elements.
import { Block } from 'notiflix/build/notiflix-block-aio';(B1) Block Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-block-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>@param1 {string | Array<HTMLElement> | NodeListOf<HTMLElement>}: Required, CSS selector(s) that matches the element(s) | Array of HTMLElments | NodeListOf HTMLElments to block.@param2 {string | Object}: Optional, a blocking message in string format. Or, extending the initialize options with the new options for each block element.@param3 {Object}: Optional, extending the initialize options with new the options for each block element. (If the second parameter has been already used for a blocking message.)Only indicatorsBlock.standard('.js-element');Block.hourglass('.js-element');Block.circle('.js-element');Block.arrows('.js-element');Block.dots('.js-element');Block.pulse('.js-element');Indicator with a blocking messageBlock.standard('.js-element', 'Please wait...');Only indicator with the new optionsBlock.standard('.js-element', {cssAnimationDuration: 1881,svgSize: '19px',});Indicator with a blocking message, and the new optionsBlock.standard('.js-element', 'Please wait...', {backgroundColor: 'rgba(0,0,0,0.8)',});Unblock the element(s) if already has been blocked.
@param1 {string | Array<HTMLElement> | NodeListOf<HTMLElement>}: Required, CSS selector(s) that matches the element(s) | Array of HTMLElments | NodeListOf HTMLElments to unblock.@param2 {number}: Optional, milliseconds for delaying in number format.Unblock immediatelyBlock.remove('.js-element');Unblock after delay => e.g. 1923msBlock.remove('.js-element', 1923);A blocking indicator type can be chosen for the demonstration.
...
Prioritize who you are, who you want to be and don’t spend time with anything that antagonizes your character.
Be brave, take the hill, but first answer that question: What’s my hill?
So first we have to define success for ourselves. And then we have to put in the work to maintain it. Make that daily tally. Tend to our garden. Keep the things that are important to us in good shape.
...
Notiflix Confirm module can be used to show non-blocking confirm/prompt boxes. This module includes 3 types of confirm/prompt: "Show", "Ask", and "Prompt". An additional question can be asked within the prompt box if using the "Ask" and/or "Prompt" ones unlike the "Show" one.
import { Confirm } from 'notiflix/build/notiflix-confirm-aio';(B1) Confirm Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-confirm-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>This method can be used to show a confirm box with info, and take the custom actions via the callback functions.
The title, the message/question, the OK button text, and the Cancel button text are the first four parameters in string format. The fifth and the sixth parameters are callback functions that are related to the OK and the Cancel button elements in order. The seventh and last parameter is the options parameter that extending the initialize options with the new options for each confirm box. Whether these parameters are Required or Optional is explained in the comments below.
@param1 {string}: Required, title text in string format.@param2 {string}: Required, message/question in string format.@param3 {string}: Required, OK button text in string format.@param4 {string}: Optional, Cancel button text in string format.@param5 {function}: Optional, a callback function that will be called when the OK button element has been clicked.@param6 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.@param7 {Object}: Optional, extending the initialize options with new the options for each confirm box.Confirm.show('Notiflix Confirm','Do you agree with me?','Yes','No',() => {alert('Thank you.');},() => {alert('If you say so...');},{Custom options},);Do you agree with me?
Confirm.show('','','','',() => {alert('');},() => {alert('');},);This method can be used to ask a question within a confirm box. The confirm box doesn't remove till the client gives the correct answer. Or, the client can click on the cancel button to close/remove the confirm box as well.
The title, the question, the answer to the question, the OK button text, and the Cancel button text are the first fifth parameters in string format. The sixth and the seventh parameters are callback functions that are related to the OK and the Cancel button elements in order. The eighth and last parameter is the options parameter that extending the initialize options with the new options for each confirm box. Whether these parameters are Required or Optional is explained in the comments below.
@param1 {string}: Required, title text in string format.@param2 {string}: Required, question text in string format.@param3 {string}: Required, answer text in string format.@param4 {string}: Required, OK button text in string format.@param5 {string}: Optional, Cancel button text in string format.@param6 {function}: Optional, a callback function that will be called when the OK button element has been clicked.@param7 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.@param8 {Object}: Optional, extending the initialize options with new the options for each confirm box.Confirm.ask('Where is Padmé?','Is she safe? Is she all right?','It seems, in your anger, you killed her.','Answer','Cancel',() => {alert('😡 NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!');},() => {alert('😪 ...');},{Custom options},);Is she safe? Is she all right?
Confirm.ask('','','','','',() => {alert('');},() => {alert('');},);This method works similarly as "window.prompt()". The client doesn't have to type a correct answer to the input element to proceed unlike the "ask()" method. The client answer passes to the callback functions as a parameter and this parameter is always a string.
The title, the question, the default answer to the question, the OK button text, and the Cancel button text are the first fifth parameters in string format. The sixth and the seventh parameters are callback functions that are related to the OK and the Cancel button elements in order. The eighth and last parameter is the options parameter that extending the initialize options with the new options for each confirm box. Whether these parameters are Required or Optional is explained in the comments below.
@param1 {string}: Required, title text in string format.@param2 {string}: Required, question text in string format.@param3 {string}: Required, default answer text in string format. An empty string can be used as well.@param4 {string}: Required, OK button text in string format.@param5 {string}: Optional, Cancel button text in string format.@param6 {function}: Optional, a callback function that will be called when the OK button element has been clicked.@param7 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.@param8 {Object}: Optional, extending the initialize options with new the options for each confirm box.Confirm.prompt('Hello','How are you feeling?','Awesome!','Answer','Cancel',(clientAnswer) => {alert('Client answer is: ' + clientAnswer);},(clientAnswer) => {alert('Client answer was: ' + clientAnswer);},{Custom options},);How are you feeling?
Confirm.prompt('','','','','',);Notiflix Confirm module can be used to show non-blocking confirm/prompt boxes. This module includes 3 types of confirm/prompt: "Show", "Ask", and "Prompt". An additional question can be asked within the prompt box if using the "Ask" and/or "Prompt" ones unlike the "Show" one.
import { Confirm } from 'notiflix/build/notiflix-confirm-aio';(B1) Confirm Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-confirm-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>This method can be used to show a confirm box with info, and take the custom actions via the callback functions.
The title, the message/question, the OK button text, and the Cancel button text are the first four parameters in string format. The fifth and the sixth parameters are callback functions that are related to the OK and the Cancel button elements in order. The seventh and last parameter is the options parameter that extending the initialize options with the new options for each confirm box. Whether these parameters are Required or Optional is explained in the comments below.
@param1 {string}: Required, title text in string format.@param2 {string}: Required, message/question in string format.@param3 {string}: Required, OK button text in string format.@param4 {string}: Optional, Cancel button text in string format.@param5 {function}: Optional, a callback function that will be called when the OK button element has been clicked.@param6 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.@param7 {Object}: Optional, extending the initialize options with new the options for each confirm box.Confirm.show('Notiflix Confirm','Do you agree with me?','Yes','No',() => {alert('Thank you.');},() => {alert('If you say so...');},{Custom options},);Do you agree with me?
Confirm.show('','','','',() => {alert('');},() => {alert('');},);This method can be used to ask a question within a confirm box. The confirm box doesn't remove till the client gives the correct answer. Or, the client can click on the cancel button to close/remove the confirm box as well.
The title, the question, the answer to the question, the OK button text, and the Cancel button text are the first fifth parameters in string format. The sixth and the seventh parameters are callback functions that are related to the OK and the Cancel button elements in order. The eighth and last parameter is the options parameter that extending the initialize options with the new options for each confirm box. Whether these parameters are Required or Optional is explained in the comments below.
@param1 {string}: Required, title text in string format.@param2 {string}: Required, question text in string format.@param3 {string}: Required, answer text in string format.@param4 {string}: Required, OK button text in string format.@param5 {string}: Optional, Cancel button text in string format.@param6 {function}: Optional, a callback function that will be called when the OK button element has been clicked.@param7 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.@param8 {Object}: Optional, extending the initialize options with new the options for each confirm box.Confirm.ask('Where is Padmé?','Is she safe? Is she all right?','It seems, in your anger, you killed her.','Answer','Cancel',() => {alert('😡 NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!');},() => {alert('😪 ...');},{Custom options},);Is she safe? Is she all right?
Confirm.ask('','','','','',() => {alert('');},() => {alert('');},);This method works similarly as "window.prompt()". The client doesn't have to type a correct answer to the input element to proceed unlike the "ask()" method. The client answer passes to the callback functions as a parameter and this parameter is always a string.
The title, the question, the default answer to the question, the OK button text, and the Cancel button text are the first fifth parameters in string format. The sixth and the seventh parameters are callback functions that are related to the OK and the Cancel button elements in order. The eighth and last parameter is the options parameter that extending the initialize options with the new options for each confirm box. Whether these parameters are Required or Optional is explained in the comments below.
@param1 {string}: Required, title text in string format.@param2 {string}: Required, question text in string format.@param3 {string}: Required, default answer text in string format. An empty string can be used as well.@param4 {string}: Required, OK button text in string format.@param5 {string}: Optional, Cancel button text in string format.@param6 {function}: Optional, a callback function that will be called when the OK button element has been clicked.@param7 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.@param8 {Object}: Optional, extending the initialize options with new the options for each confirm box.Confirm.prompt('Hello','How are you feeling?','Awesome!','Answer','Cancel',(clientAnswer) => {alert('Client answer is: ' + clientAnswer);},(clientAnswer) => {alert('Client answer was: ' + clientAnswer);},{Custom options},);How are you feeling?
Confirm.prompt('','','','','',);
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.
| 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. |
| 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.) |
| 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.) |
| 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.) |
| 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.) |
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)',},});The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Notiflix.Notify.init({width: '300px',position: 'right-bottom',closeButton: false,});Notiflix.Notify.merge({closeButton: true,});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.
| 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 |
| 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.) |
| 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.) |
| 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.) |
| 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.) |
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)',},});The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Notiflix.Report.init({width: '300px',messageMaxLength: 1923,plainText: true,});Notiflix.Report.merge({plainText: false,});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.
| 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. |
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',});The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Notiflix.Confirm.init({width: '320px',messageMaxLength: 1923,plainText: true,});Notiflix.Confirm.merge({plainText: false,});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.
| 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. |
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',});The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Notiflix.Loading.init({backgroundColor: 'rgba(0,0,0,0.9)',svgColor: '#fff',clickToClose: false,});Notiflix.Loading.merge({clickToClose: true,});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.
| 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. |
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',});The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Notiflix.Block.init({backgroundColor: 'rgba(0,0,0,0.9)',svgColor: '#f8f8f8',messageMaxLength: 19,});Notiflix.Block.merge({messageMaxLength: 23,});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.
| 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. |
| 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.) |
| 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.) |
| 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.) |
| 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.) |
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)',},});The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Notiflix.Notify.init({width: '300px',position: 'right-bottom',closeButton: false,});Notiflix.Notify.merge({closeButton: true,});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.
| 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 |
| 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.) |
| 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.) |
| 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.) |
| 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.) |
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)',},});The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Notiflix.Report.init({width: '300px',messageMaxLength: 1923,plainText: true,});Notiflix.Report.merge({plainText: false,});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.
| 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. |
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',});The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Notiflix.Confirm.init({width: '320px',messageMaxLength: 1923,plainText: true,});Notiflix.Confirm.merge({plainText: false,});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.
| 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. |
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',});The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Notiflix.Loading.init({backgroundColor: 'rgba(0,0,0,0.9)',svgColor: '#fff',clickToClose: false,});Notiflix.Loading.merge({clickToClose: true,});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.
| 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. |
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',});The "merge()" function can be used to deeply extend the "init()" options for a specific page or event globally.
Notiflix.Block.init({backgroundColor: 'rgba(0,0,0,0.9)',svgColor: '#f8f8f8',messageMaxLength: 19,});Notiflix.Block.merge({messageMaxLength: 23,});All available releases with the release notes.
All available releases with the release notes.
* SVG animations are not supported.
Notiflix Notify module can be used to send non-blocking alerts/notifications. This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".
MoreNotiflix Report module can be used to show extended notifications that contain a title, description, and button(with a callback function). This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".
MoreNotiflix Confirm module can be used to show non-blocking prompt boxes. This module includes 2 types of prompts: "Show" and "Ask". An additional question can be asked as well within the prompt box if using the "Ask" one.
MoreNotiflix Loading module can be used to show a loading indicator during a process (Fetch/XHR). Includes 6 types of animated SVG icons: "Standard", "Hourglass", "Circle", "Arrows", "Dots", and "Pulse". An additional type is "Custom", and it can be used with a custom SVG icon.
MoreNotiflix Block module can be used to block/unblock the elements during a process (Fetch/XHR), without locking the browser or the other elements/components to prevent the user’s interactions on the blocked elements.
More* SVG animations are not supported.
Notiflix Notify module can be used to send non-blocking alerts/notifications. This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".
MoreNotiflix Report module can be used to show extended notifications that contain a title, description, and button(with a callback function). This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".
MoreNotiflix Confirm module can be used to show non-blocking confirm/prompt boxes. This module includes 3 types of confirm/prompt: "Show", "Ask", and "Prompt". An additional question can be asked within the prompt box if using the "Ask" and/or "Prompt" ones unlike the "Show" one.
MoreNotiflix Loading module can be used to show a loading indicator during a process (Fetch/XHR). Includes 6 types of animated SVG icons: "Standard", "Hourglass", "Circle", "Arrows", "Dots", and "Pulse". An additional type is "Custom", and it can be used with a custom SVG icon.
MoreNotiflix Block module can be used to block/unblock the elements during a process (Fetch/XHR), without locking the browser or the other elements/components to prevent the user’s interactions on the blocked elements.
MoreNotiflix Loading module can be used to show a loading indicator during a process (Fetch/XHR). Includes 6 types of animated SVG icons: "Standard", "Hourglass", "Circle", "Arrows", "Dots", and "Pulse". An additional type is "Custom", and it can be used with a custom SVG icon.
import { Loading } from 'notiflix/build/notiflix-loading-aio';(B1) Loading Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-loading-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>@param1 {string | Object}: Optional, a message in string format. Or, extending the initialize options with the new options for each loading indicator.@param2 {Object}: Optional, extending the initialize options with new the options for each loading indicator. (If the first parameter has been already used for a message.)Only loading indicatorsLoading.standard();Loading.hourglass();Loading.circle();Loading.arrows();Loading.dots();Loading.pulse();Loading indicator with a messageLoading.standard('Loading...');Only loading indicator with the new optionsLoading.standard({clickToClose: true,svgSize: '19px',});Loading indicator with a message, and the new optionsLoading.standard('Loading...', {backgroundColor: 'rgba(0,0,0,0.8)',});Show a custom loading indicator.
Only custom loading indicator (SVG Icon URL)Loading.custom({customSvgUrl: 'https://notiflix.github.io/dir/icon.svg',});Only custom loading indicator (Text-based SVG Code)Loading.custom({customSvgCode: '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">...</svg>',});Custom loading indicator with a messageLoading.custom('Loading...', {customSvgCode: '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">...</svg>',});Changing the message of the indicator if exist.
@param1 {string}: Required, new message in string format.Loading.change('Loading %20');Remove the indicator if exist.
@param1 {number}: Optional, milliseconds for delaying in number format.Remove immediatelyLoading.remove();Remove after delay => e.g. 1923msLoading.remove(1923);A loading indicator type can be chosen for the demonstration.
Notiflix Loading module can be used to show a loading indicator during a process (Fetch/XHR). Includes 6 types of animated SVG icons: "Standard", "Hourglass", "Circle", "Arrows", "Dots", and "Pulse". An additional type is "Custom", and it can be used with a custom SVG icon.
import { Loading } from 'notiflix/build/notiflix-loading-aio';(B1) Loading Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-loading-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>@param1 {string | Object}: Optional, a message in string format. Or, extending the initialize options with the new options for each loading indicator.@param2 {Object}: Optional, extending the initialize options with new the options for each loading indicator. (If the first parameter has been already used for a message.)Only loading indicatorsLoading.standard();Loading.hourglass();Loading.circle();Loading.arrows();Loading.dots();Loading.pulse();Loading indicator with a messageLoading.standard('Loading...');Only loading indicator with the new optionsLoading.standard({clickToClose: true,svgSize: '19px',});Loading indicator with a message, and the new optionsLoading.standard('Loading...', {backgroundColor: 'rgba(0,0,0,0.8)',});Show a custom loading indicator.
Only custom loading indicator (SVG Icon URL)Loading.custom({customSvgUrl: 'https://notiflix.github.io/dir/icon.svg',});Only custom loading indicator (Text-based SVG Code)Loading.custom({customSvgCode: '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">...</svg>',});Custom loading indicator with a messageLoading.custom('Loading...', {customSvgCode: '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">...</svg>',});Changing the message of the indicator if exist.
@param1 {string}: Required, new message in string format.Loading.change('Loading %20');Remove the indicator if exist.
@param1 {number}: Optional, milliseconds for delaying in number format.Remove immediatelyLoading.remove();Remove after delay => e.g. 1923msLoading.remove(1923);A loading indicator type can be chosen for the demonstration.
Notiflix Notify module can be used to send non-blocking alerts/notifications. This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".
import { Notify } from 'notiflix/build/notiflix-notify-aio';(B1) Notify Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-notify-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>@param1 {string}: Required, a text in string format.@param2 {function | Object}: Optional, a callback function that will be called when the notification element has been clicked. Or, extending the initialize options with the new options for each notification element.@param3 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the second parameter has been already used for a callback function.)Notify.success('Sol lucet omnibus');A text can be typed for the demonstration.
Notify.success('');@param1 {string}: Required, a text in string format.@param2 {function | Object}: Optional, a callback function that will be called when the notification element has been clicked. Or, extending the initialize options with the new options for each notification element.@param3 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the second parameter has been already used for a callback function.)Notify.failure('Qui timide rogat docet negare');A text can be typed for the demonstration.
Notify.failure('');@param1 {string}: Required, a text in string format.@param2 {function | Object}: Optional, a callback function that will be called when the notification element has been clicked. Or, extending the initialize options with the new options for each notification element.@param3 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the second parameter has been already used for a callback function.)Notify.warning('Memento te hominem esse');A text can be typed for the demonstration.
Notify.warning('');@param1 {string}: Required, a text in string format.@param2 {function | Object}: Optional, a callback function that will be called when the notification element has been clicked. Or, extending the initialize options with the new options for each notification element.@param3 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the second parameter has been already used for a callback function.)Notify.info('Cogito ergo sum');A text can be typed for the demonstration.
Notify.info('');A callback function can be added as the second parameter. The callback function can be used for all types of notifications. The notifications with the callback function do not disappear until they were clicked.
Notify.success('Click to show an alert.', () => {alert('');});Extending the initialize options with the new options for each notification element. An "options" object can be added as the second parameter. In addition, it has to be the third parameter if the second parameter has been already used for a callback function.
All OptionsNotify.success('Peace at home, peace in the world.', {ID: 'MKA',timeout: 1923,showOnlyTheLastOne: true,});Notiflix Notify module can be used to send non-blocking alerts/notifications. This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".
import { Notify } from 'notiflix/build/notiflix-notify-aio';(B1) Notify Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-notify-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>@param1 {string}: Required, a text in string format.@param2 {function | Object}: Optional, a callback function that will be called when the notification element has been clicked. Or, extending the initialize options with the new options for each notification element.@param3 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the second parameter has been already used for a callback function.)Notify.success('Sol lucet omnibus');A text can be typed for the demonstration.
Notify.success('');@param1 {string}: Required, a text in string format.@param2 {function | Object}: Optional, a callback function that will be called when the notification element has been clicked. Or, extending the initialize options with the new options for each notification element.@param3 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the second parameter has been already used for a callback function.)Notify.failure('Qui timide rogat docet negare');A text can be typed for the demonstration.
Notify.failure('');@param1 {string}: Required, a text in string format.@param2 {function | Object}: Optional, a callback function that will be called when the notification element has been clicked. Or, extending the initialize options with the new options for each notification element.@param3 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the second parameter has been already used for a callback function.)Notify.warning('Memento te hominem esse');A text can be typed for the demonstration.
Notify.warning('');@param1 {string}: Required, a text in string format.@param2 {function | Object}: Optional, a callback function that will be called when the notification element has been clicked. Or, extending the initialize options with the new options for each notification element.@param3 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the second parameter has been already used for a callback function.)Notify.info('Cogito ergo sum');A text can be typed for the demonstration.
Notify.info('');A callback function can be added as the second parameter. The callback function can be used for all types of notifications. The notifications with the callback function do not disappear until they were clicked.
Notify.success('Click to show an alert.', () => {alert('');});Extending the initialize options with the new options for each notification element. An "options" object can be added as the second parameter. In addition, it has to be the third parameter if the second parameter has been already used for a callback function.
All OptionsNotify.success('Peace at home, peace in the world.', {ID: 'MKA',timeout: 1923,showOnlyTheLastOne: true,});Notiflix Report module can be used to show extended notifications that contain a title, description, and button(with a callback function). This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".
import { Report } from 'notiflix/build/notiflix-report-aio';(B1) Report Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-report-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>@param1 {string}: Required, title text in string format.@param2 {string}: Required, message text in string format.@param3 {string}: Required, button text in string format.@param4 {function | Object}: Optional, a callback function that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)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','Okay',);
A title, description, and button text can be typed for the demonstration.
Report.success('','','',);@param1 {string}: Required, title text in string format.@param2 {string}: Required, message text in string format.@param3 {string}: Required, button text in string format.@param4 {function | Object}: Optional, a callback function that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)Report.failure('Notiflix Failure','"Failure is simply the opportunity to begin again, this time more intelligently." <br/><br/>- Henry Ford','Okay',);
A title, description, and button text can be typed for the demonstration.
Report.failure('','','',);@param1 {string}: Required, title text in string format.@param2 {string}: Required, message text in string format.@param3 {string}: Required, button text in string format.@param4 {function | Object}: Optional, a callback function that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)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','Okay',);
A title, description, and button text can be typed for the demonstration.
Report.warning('','','',);@param1 {string}: Required, title text in string format.@param2 {string}: Required, message text in string format.@param3 {string}: Required, button text in string format.@param4 {function | Object}: Optional, a callback function that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)Report.info('Notiflix Info','"Knowledge rests not upon truth alone, but upon error also." <br/><br/>- Carl Gustav Jung','Okay',);
A title, description, and button text can be typed for the demonstration.
Report.info('','','',);A callback function can be added as the fourth parameter. The callback function can be used for all types of notifications.
Report.success('Notiflix','Be brave, take the hill, but first answer that question: "What’s my hill?"','Alert',() => {alert('');},);Extending the initialize options with the new options for each notification element. An "options" object can be added as the fourth parameter. In addition, it has to be the fifth parameter if the fourth parameter has been already used for a callback function.
All OptionsReport.success('Title','Message','Button',{svgSize: '42px',messageMaxLength: 1923,plainText: false,},);Notiflix Report module can be used to show extended notifications that contain a title, description, and button(with a callback function). This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".
import { Report } from 'notiflix/build/notiflix-report-aio';(B1) Report Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-report-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>@param1 {string}: Required, title text in string format.@param2 {string}: Required, message text in string format.@param3 {string}: Required, button text in string format.@param4 {function | Object}: Optional, a callback function that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)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','Okay',);A title, description, and button text can be typed for the demonstration.
Report.success('','','',);@param1 {string}: Required, title text in string format.@param2 {string}: Required, message text in string format.@param3 {string}: Required, button text in string format.@param4 {function | Object}: Optional, a callback function that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)Report.failure('Notiflix Failure','"Failure is simply the opportunity to begin again, this time more intelligently." <br/><br/>- Henry Ford','Okay',);A title, description, and button text can be typed for the demonstration.
Report.failure('','','',);@param1 {string}: Required, title text in string format.@param2 {string}: Required, message text in string format.@param3 {string}: Required, button text in string format.@param4 {function | Object}: Optional, a callback function that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)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','Okay',);A title, description, and button text can be typed for the demonstration.
Report.warning('','','',);@param1 {string}: Required, title text in string format.@param2 {string}: Required, message text in string format.@param3 {string}: Required, button text in string format.@param4 {function | Object}: Optional, a callback function that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)Report.info('Notiflix Info','"Knowledge rests not upon truth alone, but upon error also." <br/><br/>- Carl Gustav Jung','Okay',);A title, description, and button text can be typed for the demonstration.
Report.info('','','',);A callback function can be added as the fourth parameter. The callback function can be used for all types of notifications.
Report.success('Notiflix','Be brave, take the hill, but first answer that question: "What’s my hill?"','Alert',() => {alert('');},);Extending the initialize options with the new options for each notification element. An "options" object can be added as the fourth parameter. In addition, it has to be the fifth parameter if the fourth parameter has been already used for a callback function.
All OptionsReport.success('Title','Message','Button',{svgSize: '42px',messageMaxLength: 1923,plainText: false,},);