iOS Style Notification Badge Plugin - iOSBadge

File Size: 254 KB
Views Total: 402
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
iOS Style Notification Badge Plugin - iOSBadge

iOSBadge is a simple jQuery & Vanilla JavaScript plugin that adds an iOS style, fully customizable notification badge to an element.

This plugin has been created because there are many instances where a site will have a number of unread items, whether it be emails or forum posts. On iOS devices such as the iPhone and iPad, there is a notification badge that displays how many items the user has. The idea of this plugin was to replicate something similar within web pages.

How to use it:

1. Load the iOSBadge plugin's files.

<link rel="stylesheet" href="/path/to/dist/iosbadge.min.css" />
<script src="/path/to/dist/iosbadge.min.js"></script>
<!-- jQuery Is OPTIONAL -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Add a default notification badge to the element you specify. Note that the target element must be relatively positioned.

<div id="demo" class="app">
.app {
  position: relative;
  /* your own styles here */
// Vanilla JS
var icon = document.getElementById('demo');
var badge = new IOSBadge(icon, {
    // options here

// OR jQuery
  // options here

3. Customize the notification badge:


  // number of notifications
  content: 1,

  // 20, 22, 24, 26, 28, 30, 32, 34, and 36
  size: 20,

  // 'red', 'blue', 'green', 'grey',and 'ios'
  theme: 'red',

  // 'top-left', 'top-right', 'bottom-left' or 'bottom-right'
  position: 'top-right',

  // namespace
  namespace: 'iosb',


4. Available API methods which allow you to control the notification badge programmatically.

// set the number of notifications

// get the number of notifications

// set the position of the badge

// set the theme of the badge

// set the size of the badge

// increase & decrease

// show & hide the bage;

5. Note that most of those methods are chainable.


This awesome jQuery plugin is developed by kristerkari. For more Advanced Usages, please check the demo page or visit the official website.