A Guide to React Notification Badges

Notification badges, or “bubbles,” can elicit joy or misery, depending on why you’re getting them. We often see badges on our phone’s app icons as the standard red dot 🔴. A social media notification badge is usually a good thing, indicating engagement 🤗.

On the other hand, that 10,000 unread email notification badge probably leaves you anxious, a constant reminder your inbox is a mess. Maybe at this point you’re so inundated with notifications that you don’t give them any thought at all.

With that being said, if your product has a notification system, it will probably need badges. Your product inbox badge doesn’t have to instill the same anxious feeling that app badges do.

With libraries and frameworks available to help guide design and implementation, you can capture attention through custom designs and small animations. We’re going to take a look at some libraries for React notification badges, what they offer for customization and what benefits implementation brings.

Clean, reliable Material UI

Material-UI is an open-source React framework made up of components that adhere to the guidelines of Material Design. Even though there are options to fully customize components, by using the default specifications that are laid out, you ensure things like accessibility in color schemes are taken into account.

While Material-UI core package is 328.6kb minified, the library is extremely optimized for both performance and speed. Each component can be individually imported, which allows for the use of tree-shaking, only keeping the code you use in your build. That way, you can import components like so: import {Badge, IconButton} from '@material-ui/core';

When creating badges, you’ll probably import the Material Icons component along with the actual Badge component. The Material Icons component gives you access to over 1,100 official Material Design icons in an SVG format.

While there are out-of-the-box styles for these components, there’s classes object property in the API of every component. Using this object allows you to have deeper control over the component’s style. With the material-ui/core/styles styling solution, you can gain access to things like theme nesting and dynamic styles in three ways: the Hook API, the Styled components API, and the Higher-order component API.

Material UI provides a sandbox with custom styles applied to a Badge component utilizing withStyles from the Higher-order component API. If you’d prefer to use another styling solution, there is interoperability for a variety of other solutions, including plain CSS and styled components.

Accessibility is often overlooked in design. If you’re working toward making your site accessible for everyone (which you should be doing), an easy place to start is with color contrast. There are sites and extensions to check for color contrast throughout your site, but by using Material UI, you have access to the colors in the Material Design specification, which means you can take advantage of their Color Tool to measure both good looks and accessibility.

Some other features of the Badge API are max values for the number inside the Badge, overlap to make the Badge overlap icons without any custom styling, and an invisible property that shows or hides the Badge. The invisible property could be implemented to allow users to control whether they want to see whether or not they have notifications.

Maybe you’ll start with just using Material UI’s Badge component. But if you and the design team are discussing ways to implement design patterns across your product that create harmony, the plethora of components in Material UI can aid you on that journey.

A lighter-weight React Bootstrap

If you don’t need quite so many bells and whistles with your React notification badge, React Bootstrap might be an appropriate option. Currently at 113kb minified, this front-end framework is built entirely with React components, eliminating the need for dependencies other bootstrap frameworks rely on, like jQuery 🤮.

Like Material UI, you can import individual components from React Bootstrap rather than the whole library, keeping your build small.

You’ll have to bring your own SVG icons into this framework. But if you don’t need icons and are set on a more text-based solution, this framework has some nice things to offer. Badge size scales with semantic HTML elements, like h1 - h6 and p tags.

There’s a variant and pill modifier that can be added to the Badge component. The variant gives context to the type of notification, while the pill gives the component a round look through an added border-radius and extra padding. Below is some sample code, using each version of their variant modifiers, with the h1 also showing the pill modifier.

<div>
 <h1>
   Inbox <Badge pill variant="primary">3</Badge>
 </h1>
 <h2>
   Inbox <Badge variant="secondary">3</Badge>
 </h2>
 <h3>
   Inbox <Badge variant="success">3</Badge>
 </h3>
 <h4>
   Inbox <Badge variant="warning">3</Badge>
 </h4>
 <h5>
   Inbox <Badge variant="danger">3</Badge>
 </h5>
 <h6>
   Inbox <Badge variant="info">3</Badge>
 </h6>
 <p>
   Inbox <Badge variant="light">3</Badge>
 </p>
 <p>
   Inbox <Badge variant="dark">3</Badge>
 </p>
</div>

React Bootstrap also doesn’t forget about accessibility, adopting the Bootstrap sr-only class. This class is meant for screen readers only and can be added to an element like a span tag to provide information to those using screen readers. React notification badges have the potential to be confusing to screen readers, so the sr-only class provides extra context.

There will be no visible difference between this h1 and the h1 in the previous example, but this version is screen-reader-friendly 🤗.

<h1>
 Inbox <Badge pill variant="primary">3</Badge>
 <span className="sr-only">unread messages</span>
</h1>

If you want to add your own custom styling, that’s an option. React Bootstrap follows the component-* pattern. Component classNames should be built contextually for each component.

If you want to add a custom className to your badge, you can add on to the existing badge class in a contextual way, like badge-urgent, and apply your custom styles there.

React Bootstrap also has a way to override the base prefixes. By creating a bsPrefix class and adding it to a component or ThemeProvider, you can adjust the component’s prefix. If, for some reason, you need an ultimate-badge as well as a badge, this would be the way to do it. While they advise against using the bsPrefix class, the generic names of their classes might cause problems with other parts of your app, especially if you aren’t using a Bootstrap framework already.

A simple React notification badge component

If you don’t want to buy into a solution from a larger ecosystem, React-notification-badge, offers simple badges with some preset animations. At 7.1kb minified and over 1,400 downloads a week, it’s a fun solution for quick React notification badge needs, with customization options available if you need them.

The API contains both containerStyle for customizing the container of the badge with a style object, and style for custom styling the badge with a style object. With effect , you have access to the preset badge animations: ROTATE_X, ROTATE_Y, SCALE and the ability to build a custom animation by passing an array.

To build a custom array, set the effect to an array of [string, string, object, object]. The indexes represent as follows:

• effect[0] is the transform on the first frame
• effect[1] is the transform on the frameLength
• effect[2] is the style[key] = value on the first frame
• effect[3] is the style[key] = value on the frameLength

If you want to combine a scaling and translate effect, you could set effect={['scale(0), 'scale[1]', {top:'20px'}, {top: 0px'}]}. If no transition is required, you can set effect[0] and effect[1] as null or ''.

While fairly straightforward and simple, it provides a way to fully customize a solution by providing a variety of style objects. If you’re just getting started with badges and want to play around, fork the repo on GitHub, and start playing around with the example code provided.

Ring your MagicBell

Beyond badges, MagicBell improves your customers’ notification experience with an in-app inbox that has 52 points of customization. You can implement MagicBell into your product and match your brand’s identity through color schemes and typography.

The React SDK lets you build a completely custom-component-based interface. And if you’re not using React, you can use the JavaScript embed or core package to handle network calls to build your own custom components.

Sign up for a free trial today.

Related articles:

• Split your notification inbox by categories using MagicBell's React SDK
• Your Go-to Guide to Notification Customization with MagicBell