NOTY is a notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.

GitHub release Bower version npm version Packagist version devDependency Status npm Contributors

Need help for Documentation & Translation Details are here.
v2.* documentation is here.

Options & Defaults

Creating a notification;

new Noty({
    ...
    text: 'Some notification text',
    ...
}).show();


Available options listed below.

Option Default Info
type
: string
Default: 'alert' alert, success, error, warning, info
ClassName generator uses this value → `noty_type__${type}`
layout
: string
Default: 'topRight' top, topLeft, topCenter, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomCenter, bottomRight
ClassName generator uses this value → `noty_layout__${layout}`
theme
: string
Default: 'mint' relax, mint, metroui
ClassName generator uses this value → `noty_theme__${theme}`
text
: string
Default: '' This string can contain HTML too. But be careful and don't pass user inputs to this parameter.
timeout
: boolean | int
Default: false false, 1000, 3000, 3500, etc.
Delay for closing event in milliseconds (ms). Set 'false' for sticky notifications.
progressBar
: boolean
Default: true true, false
Displays a progress bar if timeout is not false.
closeWith
: [...string]
Default: ['click'] click, button
animation.open
: string | null | function
Default: 'noty_effects_open' If string, assumed to be CSS class name.
If null, no animation at all.
If function, runs the function. (v3.0.1+)
You can use animate.css class names or your custom css animations as well.
animation.close
: string | null | function
Default: 'noty_effects_close' If string, assumed to be CSS class name.
If null, no animation at all.
If function, runs the function. (v3.0.1+)
You can use animate.css class names or your custom css animations as well.
sounds.sources
: [...string]
Default: [] v3.1.0-beta Array of audio sources e.g 'some.wav' Check browser support
sounds.volume
: int
Default: 1 v3.1.0-beta Integer value between 0-1 e.g 0.5 Check browser support
sounds.conditions
: [...string]
Default: [] v3.1.0-beta There are two conditions for now: 'docVisible' & 'docHidden'.
You can use one of them or both. Check browser support
docTitle.conditions
: [...string]
Default: [] v3.1.0-beta There are two conditions for now: 'docVisible' & 'docHidden'.
You can use one of them or both.
modal
: boolean
Default: false v3.1.0-beta Behaves like v2 but more stable
id
: string | boolean
Default: false You can use this id with querySelectors. Generated automatically if false.
force
: boolean
Default: false DOM insert method depends on this parameter. If false uses append, if true uses prepend.
queue
: string
Default: 'global' NEW Named queue system. Details are here.
killer
: boolean | string
Default: false If true closes all visible notifications and shows itself.
If string(queueName) closes all visible notification on this queue and shows itself.
container
: boolean | string
Default: false Custom container selector string. Like '.my-custom-container'. Layout parameter will be ignored.
buttons
: [...Noty.button]
Default: [] An array of Noty.button, for creating confirmation dialogs. Details are here.
callbacks.beforeShow
: function
Default: () => {} Details are here.
callbacks.onShow
: function
Default: () => {} Details are here.
callbacks.afterShow
: function
Default: () => {} Details are here.
callbacks.onClose
: function
Default: () => {} Details are here.
callbacks.afterShow
: function
Default: () => {} Details are here.
callbacks.onHover
: function
Default: () => {} Details are here.
callbacks.onTemplate
: function
Default: () => {} Mainly for DOM manipulations. Details are here.
Of course, you can override default values;
Noty.overrideDefaults({
    layout   : 'topRight',
    theme    : 'mint',
    closeWith: ['click', 'button'],
    animation: {
        open : 'animated fadeInRight',
        close: 'animated fadeOutRight'
    }
});