<Bell />

The Bell component displays the notification bell icon and unread notification count

The Bell component displays the notification bell icon. It can also be used to show the number of unread notifications.

Basic Usage

import { Inbox, Bell } from '@novu/react';
 
function Novu() {
  return (
    <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
      <Bell />
    </Inbox>
  );
}

Custom Bell

You can pass any custom components as children to <Bell/> and render them as custom bell icon.

import { Inbox, Bell } from '@novu/react';
import { BellIcon } from './icons';
 
function Novu() {
  return (
    <Inbox>
      <Bell
        renderBell={(unreadCount) => (
          <div>
            <span>{unreadCount}</span>
            <BellIcon />
          </div>
        )}
      />
    </Inbox>
  );
}

<Inbox /> can be mounted in your own popover component. For further customization, you can also use the renderBell and renderNotification render props.

Below is an example of how to use <Inbox /> with Radix UI:

import React from 'react';
import * as Popover from '@radix-ui/react-popover';
import { BellIcon, Cross2Icon } from '@radix-ui/react-icons';
import { Inbox, Bell, Notifications } from '@novu/react';
import './styles.css';
 
const PopoverDemo = () => (
  <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
    <Popover.Root>
      <Popover.Trigger asChild>
        <Bell
          renderBell={(unreadCount) => (
            <div>
              <span>{unreadCount}</span>
              <BellIcon />
            </div>
          )}
        />
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Content className="PopoverContent" sideOffset={5}>
          <Notifications />
          <Popover.Close className="PopoverClose" aria-label="Close">
            <Cross2Icon />
          </Popover.Close>
          <Popover.Arrow className="PopoverArrow" />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  </Inbox>
);
 
export default PopoverDemo;

Basic Usage

Custom Bell

Custom Popover Integration

On this page