> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# NotificationCounter

> A compact numeric badge for notification counts.

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

```tsx theme={null}
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

<ParamField body="className" type="string">
  Class applied to the badge.
</ParamField>

<ParamField body="count" type="number" required>
  Number to display as supplied, without clamping or hiding zero.
</ParamField>

<ParamField body="variant" type="&#x22;primary&#x22; | &#x22;secondary&#x22;" default="primary">
  Primary or secondary badge styling.
</ParamField>