Count Badge

A count bubble that sits on the corner of an icon or avatar. It pops in when the count first appears, pulses each time the number changes, and shrinks away when it returns to zero. Large counts read "99+", it can be a plain dot instead, and the label and number are read out together. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add count-badge

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/count-badge.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { Text } from "react-native";
import { CountBadge } from "@/components/ui/count-badge";

export default function Example() {
  return (
    <CountBadge count={7} label="Messages">
      <Text style={{ fontSize: 24 }}>✉</Text>
    </CountBadge>
  );
}

Props