---
permalink: /library/noty/
title: Noty
description: Elevate your user experience with Noty, a popular JavaScript library for creating customizable, stylish notification messages. Easy to install and use, Noty is perfect for any project that wants to engage and inform users in a dynamic way.
handler: noty
data-controller: noty
---
## Laravel
Installation
```shell
composer require php-flasher/flasher-noty-laravel
```
After installation, you need to run another command to set up the necessary assets for PHPFlasher:
```shell
php artisan flasher:install
```
Configuration
```php
[
'noty' => [
'scripts' => [
'/vendor/flasher/noty.min.js',
'/vendor/flasher/flasher-noty.min.js'
],
'styles' => [
'/vendor/flasher/noty.css',
'/vendor/flasher/mint.css'
],
'options' => [
// Optional: Add global options here
'layout' => 'topRight'
],
],
],
];
```
## Symfony
Installation
```shell
composer require php-flasher/flasher-noty-symfony
```
After installation, you need to run another command to set up the necessary assets for PHPFlasher:
```shell
php bin/console flasher:install
```
Configuration
```yaml
# config/packages/flasher.yaml
flasher:
plugins:
noty:
scripts:
- '/vendor/flasher/noty.min.js'
- '/vendor/flasher/flasher-noty.min.js'
styles:
- '/vendor/flasher/noty.css'
- '/vendor/flasher/mint.css'
options:
# Optional: Add global options here
layout: topRight
```
---
## Usage
---
> The methods described in the **[Usage](/installation/#-usage)** section can also be used with the `notyf` adapter.
---
To display a notification message, you can either use the `noty()` helper method or obtain an instance of `noty` from the service container.
Then, before returning a view or redirecting, call the `success()` method and pass in the desired message to be displayed.
success
{% assign id = '#/ noty' %}
{% assign type = 'success' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
use Flasher\Noty\Prime\NotyInterface;
class BookController
{
public function saveBook()
{
noty()->success('{{ message }}');
// or simply
noty('{{ message }}');
}
/**
* if you prefer to use dependency injection
*/
public function register(NotyInterface $noty)
{
// ...
$noty->success('{{ site.data.messages["success"] | sample }}');
// ... redirect or render the view
}
}
```
info
{% assign id = '#/ usage info' %}
{% assign type = 'info' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
noty()->{{ type }}('{{ message }}');
```
warning
{% assign id = '#/ usage warning' %}
{% assign type = 'warning' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
noty()->{{ type }}('{{ message }}');
```
error
{% assign id = '#/ usage error' %}
{% assign type = 'error' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
noty()->{{ type }}('{{ message }}');
```
---
For more information on Noty options and usage, please refer to the original documentation at [https://ned.im/noty/](https://ned.im/noty/)
---
> The methods described in the **[Usage](/installation/#-usage)** section can also be used with the `notyf` adapter.
---
layout
`top`, `topLeft`, `topCenter`, `topRight`, `center`, `centerLeft`, `centerRight`, `bottom`, `bottomLeft`, `bottomCenter`, `bottomRight`
ClassName generator uses this value → noty_layout__${layout}
```php
noty()->layout(string $layout);
```
{% assign id = '#/ noty layout' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"layout":"topCenter"}' %}
{% include example.html %}
```php
{{ id }}
noty()
->layout('topCenter')
->{{ type }}('{{ message }}');
```
---
theme
Possible values: `relax`, `mint`, `metroui`, `light`, `sunset`, `nest`.
ClassName generator uses this value → noty_theme__${theme}
```php
noty()->theme(string $theme);
```
> Default Theme: **mint**
Examples:
{% assign successMessage = site.data.messages['success'] | sample %}
{% assign errorMessage = site.data.messages['error'] | sample %}
{% assign warningMessage = site.data.messages['warning'] | sample %}
{% assign infoMessage = site.data.messages['info'] | sample %}
```php
#/ noty theme mint
noty()
->theme('mint')
->success('{{ successMessage }}');
noty()
->theme('mint')
->error('{{ errorMessage }}');
noty()
->theme('mint')
->warning('{{ warningMessage }}');
noty()
->theme('mint')
->info('{{ infoMessage }}');
```
{% assign successMessage = site.data.messages['success'] | sample %}
{% assign errorMessage = site.data.messages['error'] | sample %}
{% assign warningMessage = site.data.messages['warning'] | sample %}
{% assign infoMessage = site.data.messages['info'] | sample %}
```php
#/ noty theme relax
// don't the load the theme css file: https://github.com/needim/noty/blob/master/lib/themes/relax.css
noty()
->theme('relax')
->success('{{ successMessage }}');
noty()
->theme('relax')
->error('{{ errorMessage }}');
noty()
->theme('relax')
->warning('{{ warningMessage }}');
noty()
->theme('relax')
->info('{{ infoMessage }}');
```
{% assign successMessage = site.data.messages['success'] | sample %}
{% assign errorMessage = site.data.messages['error'] | sample %}
{% assign warningMessage = site.data.messages['warning'] | sample %}
{% assign infoMessage = site.data.messages['info'] | sample %}
```php
#/ noty theme metroui
// Theme: https://github.com/needim/noty/blob/master/lib/themes/metroui.css
noty()
->theme('metroui')
->success('{{ successMessage }}');
noty()
->theme('metroui')
->error('{{ errorMessage }}');
noty()
->theme('metroui')
->warning('{{ warningMessage }}');
noty()
->theme('metroui')
->info('{{ infoMessage }}');
```
{% assign successMessage = site.data.messages['success'] | sample %}
{% assign errorMessage = site.data.messages['error'] | sample %}
{% assign warningMessage = site.data.messages['warning'] | sample %}
{% assign infoMessage = site.data.messages['info'] | sample %}
```php
#/ noty theme light
// Theme: https://github.com/needim/noty/blob/master/lib/themes/light.css
noty()
->theme('light')
->success('{{ successMessage }}');
noty()
->theme('light')
->error('{{ errorMessage }}');
noty()
->theme('light')
->warning('{{ warningMessage }}');
noty()
->theme('light')
->info('{{ infoMessage }}');
```
{% assign successMessage = site.data.messages['success'] | sample %}
{% assign errorMessage = site.data.messages['error'] | sample %}
{% assign warningMessage = site.data.messages['warning'] | sample %}
{% assign infoMessage = site.data.messages['info'] | sample %}
```php
#/ noty theme sunset
// Theme: https://github.com/needim/noty/blob/master/lib/themes/sunset.css
noty()
->theme('sunset')
->success('{{ successMessage }}');
noty()
->theme('sunset')
->error('{{ errorMessage }}');
noty()
->theme('sunset')
->warning('{{ warningMessage }}');
noty()
->theme('sunset')
->info('{{ infoMessage }}');
```
---
timeout
`false`, `1000`, `3000`, `3500`, etc. Delay for closing event in milliseconds (ms). Set `false` for sticky
notifications.
```php
noty()->timeout(int|bool $timeout)
```
{% assign id = '#/ noty timeout' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"timeout": 2000}' %}
{% include example.html %}
```php
{{ id }}
noty()
->timeout(2000) // 2 seconds
->{{ type }}('{{ message }}');
```
---
progressBar
`true`, `false` - Displays a progress bar if timeout is not false.
```php
noty()->progressBar(bool $progressBar = false)
```
{% assign id = '#/ noty progressBar' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"progressBar": false}' %}
{% include example.html %}
```php
{{ id }}
noty()
->progressBar(false)
->{{ type }}('{{ message }}');
```
---
closeWith
`click`, `button`
Default `click`
```php
noty()->closeWith(string|array $closeWith)
```
{% assign id = '#/ noty closeWith' %}
{% assign type = 'error' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"closeWith": ["click", "button"]}' %}
{% include example.html %}
```php
{{ id }}
noty()
->closeWith(['click', 'button'])
->{{ type }}('{{ message }}');
```
---
animation
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.
```php
noty()->animation(string $animation, string $effect)
```
{% assign id = '#/ noty animation' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"animation": null}' %}
{% include example.html %}
```php
{{ id }}
noty()
->animation(null)
->{{ type }}('{{ message }}');
```
---
sounds
`sources` : Array of audio sources e.g 'some.wav'
`volume` : nteger value between 0-1 e.g 0.5
`conditions` : There are two conditions for now: 'docVisible' & 'docHidden'. You can use one of them or both.
```php
noty()->sounds(string $option, mixed $value)
```
{% assign id = '#/ noty sounds' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"sounds": {"sources": ["/static/sounds/notification.wav"], "volume": 0.3, "conditions": ["docVisible", "docHidden"]}}' %}
{% include example.html %}
```php
{{ id }}
noty()
->sounds('sources', ['/static/sounds/notification.wav'])
->sounds('volume', 0.3)
->sounds('conditions', ['docVisible', 'docHidden'])
->{{ type }}('{{ message }}');
```
---
docTitle
There are two conditions for now: `docVisible` & `docHidden`. You can use one of them or both.
```php
noty()->docTitle(string $option, mixed $docTitle)
```
{% assign id = '#/ noty docTitle' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"docTitle": {"conditions": ["docVisible", "docHidden"]}}' %}
{% include example.html %}
```php
{{ id }}
noty()
->docTitle('conditions', ['docVisible', 'docHidden'])
->{{ type }}('{{ message }}');
```
---
modal
```php
noty()->modal(bool $modal = true)
```
{% assign id = '#/ noty modal' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"modal": true}' %}
{% include example.html %}
```php
{{ id }}
noty()
->modal(true)
->{{ type }}('{{ message }}');
```
---
id
You can use this id with querySelectors.
Generated automatically if false.
```php
noty()->id(bool|string $id)
```
{% assign id = '#/ noty id' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"id": false}' %}
{% include example.html %}
```php
{{ id }}
noty()
->id(false)
->{{ type }}('{{ message }}');
```
---
force
DOM insert method depends on this parameter.
If `false` uses append, if `true` uses prepend.
```php
noty()->force(bool $force = true)
```
{% assign id = '#/ noty force' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"force": false}' %}
{% include example.html %}
```php
{{ id }}
noty()
->force(false)
->{{ type }}('{{ message }}');
```
---
queue
NEW Named queue system. Details are [here](https://ned.im/noty/#/api).
```php
noty()->queue(string $queue)
```
Default: `global`
{% assign id = '#/ noty queue' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"queue":"global"}' %}
{% include example.html %}
```php
{{ id }}
noty()
->queue('global')
->{{ type }}('{{ message }}');
```
---
killer
If `true` closes all `visible` notifications and shows itself.
If `string(queueName)` closes all `visible` notification on this queue and shows itself.
```php
noty()->killer(bool|string $killer)
```
{% assign id = '#/ noty killer' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"killer": true}' %}
{% include example.html %}
```php
{{ id }}
noty()
->killer(true)
->{{ type }}('{{ message }}');
```
---
container
Custom container selector string. Like `.my-custom-container`.
Layout parameter will be ignored.
```php
noty()->container(bool|string $container)
```
{% assign id = '#/ noty container' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"container": false}' %}
{% include example.html %}
```php
{{ id }}
noty()
->container(false)
->{{ type }}('{{ message }}');
```
---
visibilityControl
If `true` Noty uses PageVisibility API to handle timeout.
To ensure that users do not miss their notifications.
```php
noty()->visibilityControl(bool $visibilityControl)
```
{% assign id = '#/ noty visibilityControl' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"visibilityControl": true}' %}
{% include example.html %}
```php
{{ id }}
noty()
->visibilityControl(true)
->{{ type }}('{{ message }}');
```