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>
);

Colors

The default red color can be swapped with a less attention-seeking purple.

Unread notifications

15 notifications

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

export default () => (
  <div className="flex items-center gap-2">
    <NotificationBadge color="purple" />
    <NotificationBadge count={15} color="purple" />
    <NotificationBadge size="sm" color="purple" />
    <NotificationBadge size="xs" color="purple" />
  </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>
);

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.

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} aria-label="Comments" />
  </NotificationBadge>
);

API Reference

NotificationBadge

Use to display a count of unread notifications.

children

ReactNode

To position the badge in the top right corner of another element, pass that element as a child.

---

className

string

Optional styles for the badge.

---

color

"purple" | "red" = "red"

The color of the badge.

---

count

number

The total notification count.

---

maxDigits

number = 2

The maximum number of digits to display. Counts above this value will display a plus sign. For example, if the count is 1000, and maxDigits is 2, the badge will display 99+. Set to ‘0’ to always show the full count.

---

pulse

boolean = false

Animate a beacon pulse on the badge.

---

size

"xs" | "sm" | "md" = "md"

The size of the badge. The sm and xs badges do not show a count.

---

wrapperClassName

string

Optional styles for the badge wrapper. Only used if the badge receives a child element.

---