# ![logo](_media/noty-v3-logo.png)

> A Dependency-free notification library


<p>
<button id="example-runner" class="button">Show me a notification</button>
</p>

<a class="github-button" href="https://github.com/needim/noty" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star needim/noty on GitHub">Star</a>
<a class="github-button" href="https://github.com/needim/noty/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork needim/noty on GitHub">Fork</a>
<a class="github-button" href="https://github.com/needim/noty/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch needim/noty on GitHub">Watch</a>
<a class="github-button" href="https://github.com/needim" data-size="large" data-show-count="true" aria-label="Follow @needim on GitHub">Follow @needim</a>                            

                            
<p align="left">
<a href="https://github.com/needim/noty/releases"><img src="https://img.shields.io/github/release/needim/noty.svg" alt="GitHub release"></a>
<a href="https://bower.io/"><img src="https://img.shields.io/bower/v/noty.svg" alt="Bower version"></a>
<a href="https://www.npmjs.com/package/noty"><img src="https://img.shields.io/npm/v/noty.svg" alt="NPM version"></a>
<a href="https://packagist.org/packages/needim/noty"><img src="https://img.shields.io/packagist/v/needim/noty.svg" alt="Packagist version"></a>
<img src="https://img.shields.io/david/needim/noty.svg" alt="Dependencies">
<img src="https://img.shields.io/david/dev/needim/noty.svg" alt="Dev Dependencies">
<br>
<a href="https://travis-ci.org/needim/noty"><img src="https://img.shields.io/travis/needim/noty/master.svg" alt="Travis"></a>
<a href="https://www.npmjs.com/package/noty"><img src="https://img.shields.io/npm/dm/noty.svg?label=npm%20downloads" alt="NPM Downloads"></a>
<a href="https://github.com/needim/noty/graphs/contributors"><img src="https://img.shields.io/github/contributors/needim/noty.svg" alt="Contributors"></a>
</p>

## Sponsored By

<div class="supported-by">
    <a target="_blank" href="https://pusher.com/?utm_source=needim&utm_medium=paid&utm_campaign=needim">
        <img src="_media/pusher_logo_dark.png" width="160" alt="">
    </a>
</div>

<div class="supported-by">
    <a target="_blank" href="https://www.jetbrains.com?ref=notyjs">
        <img src="_media/logo_JetBrains_4.svg" width="80" alt="">
    </a>
</div>

<div class="supported-by">
    <a target="_blank" href="https://www.browserstack.com?ref=notyjs">
        <img src="_media/browserstack.svg" width="220" alt="">
    </a>
</div>

## Became a Patron

If you enjoy my work and want to support me creating stuff, I'm on Patreon!<br>
<a class="jmgFob" href="https://www.patreon.com/bePatron?u=5075261" data-patreon-widget-type="become-patron-button">
  <span class="sc-ifAKCX hyFnYR"><svg viewBox="0 0 569 546" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>Patreon logo</title><g><circle data-color="1" id="Oval" cx="362.589996" cy="204.589996" r="204.589996"></circle><rect data-color="2" id="Rectangle" x="0" y="0" width="100" height="545.799988"></rect></g></svg></span>
  Become a Patron!
</a>

!> v2 Documentation is <a href="/noty/v2">here</a>

## Features

- Dependency-free 
- UMD
- Web Push Notifications with Service Worker support
- Named queue system
- Has 11 layouts, 5 notification styles, 5+ themes
- Custom container (inline notifications)
- Confirm notifications
- TTL with timeout option
- Progress bar indicator for timed notifications
- Supports css animations, **animate.css**, **mojs**, **bounce.js**, **velocity** and others
- 2 close options: click, button
- API & Callbacks
- Custom templating
- Document visibility control (blur, focus)
