NotificationCounter

NotificationCounter displays the supplied number without clamping it or hiding zero. Use the surrounding label to explain what the count means.

import { NotificationCounter } from 'twenty-ui/components';
import { Button } from 'twenty-ui/primitives/input';

export const InboxButton = ({ count }: { count: number }) => (
  <Button endIcon={<NotificationCounter count={count} />}>
    Inbox ({count} unread)
  </Button>
);

variant="secondary" changes the badge appearance. The counter has no click handler or live-region behavior of its own.

Props

string

Class applied to the badge.

number

required

Number to display as supplied, without clamping or hiding zero.

"primary" | "secondary"

default:"primary"

Primary or secondary badge styling.

Overview

Apps

API

Self-Host

Contribute

UI Library

Props

​Props

Props