Notification Badge

Usage

Unread notifications

import { NotificationBadge } from "stylus-ui/NotificationBadge";

export default () => <NotificationBadge />;

Counts

The badge will display a count of unread notifications.

1 notifications

import { NotificationBadge } from "stylus-ui/NotificationBadge";

export default () => <NotificationBadge count={1} />;

Max Digits

By default, the badge will max out after 2 digits at 99.

99+ notifications

import { NotificationBadge } from "stylus-ui/NotificationBadge";

// The count is 1000, but the badge will only display 99.
export default () => <NotificationBadge count={1000} />;

To change the max number displayed, set maxDigits.

999+ notifications

import { NotificationBadge } from "stylus-ui/NotificationBadge";

export default () => <NotificationBadge count={1000} maxDigits={3} />;

To display the full count regardless of length, set maxDigits to 0.

15,225 notifications

import { NotificationBadge } from "stylus-ui/NotificationBadge";

export default () => <NotificationBadge count={15225} maxDigits={0} />;

Sizing

A smaller badge, which does not show a count, can be used by setting size to sm.

import { NotificationBadge } from "stylus-ui/NotificationBadge";

export default () => <NotificationBadge size="sm" />;

The smallest badge, best for inline text, can be used by setting size to xs.

Notifications

import { NotificationBadge } from "stylus-ui/NotificationBadge";

export default () => (
  <div className="flex items-center gap-2">
    <span>Notifications</span>
    <NotificationBadge size="xs" />
  </div>
);

Positioning

The badge can be positioned in the top right corner of another element by passing that element as a child.

1 notifications

Comments

import { faMessage } from "@fortawesome/pro-regular-svg-icons";
import { Button } from "stylus-ui/Button";
import { NotificationBadge } from "stylus-ui/NotificationBadge";

export default () => (
  <NotificationBadge count={1}>
    <Button variant="secondary" icon={faMessage}>
      Comments
    </Button>
  </NotificationBadge>
);

This also works for the small badge.

Comments

import { faMessage } from "@fortawesome/pro-regular-svg-icons";
import { Button } from "stylus-ui/Button";
import { NotificationBadge } from "stylus-ui/NotificationBadge";

export default () => (
  <NotificationBadge size="sm">
    <Button variant="secondary" icon={faMessage}>
      Comments
    </Button>
  </NotificationBadge>
);

Theme

When using the badge over dark elements, set the theme to dark.

99+ notifications

Comments

import { faMessage } from "@fortawesome/pro-regular-svg-icons";
import { Button } from "stylus-ui/Button";
import { NotificationBadge } from "stylus-ui/NotificationBadge";

export default () => (
  <NotificationBadge count={1000} theme="dark">
    <Button variant="secondary" icon={faMessage} theme="dark">
      Comments
    </Button>
  </NotificationBadge>
);

Pulse Animation

When drawing attention to a notification, you can animate the badge by setting pulse to true. This should be used sparingly and generally reserved for important new features.

Comments

import { faMessage } from "@fortawesome/pro-regular-svg-icons";
import { Button } from "stylus-ui/Button";
import { NotificationBadge } from "stylus-ui/NotificationBadge";

export default () => (
  <NotificationBadge size="sm" pulse>
    <Button variant="secondary" icon={faMessage} screenReaderLabel="Comments" />
  </NotificationBadge>
);

API Reference

NotificationBadge

Prop	Type	Default
children	ReactNode
className	string
count	number
maxDigits	number	2
pulse	boolean	false
size	"xs""sm""md"	md
theme	"light""dark"	light
wrapperClassName	string