Notification

A small indicator notifying users of an unread message or event.

githubstorybook
50
99+

Usage

import { Notification } from "#/ui/components/Notification"
<Notification count={42}>
  <div className="size-8 rounded-xl bg-gray-300 ring-inset ring-1 ring-gray-400/50"></div>
</Notification>

Notification acts as a wrapping component in order to position itself correctly. You can wrap any component in a Notification.

50
50
Badge
50

Props

Count

The only required prop is count. This is the number of notifications you have to display.

50

Max

By default you’re limited to 99 notificatons, after which a + will be displayed.

99+

You can adjust this using the max prop, which will create your new upper limit. Counts that go over the max prop will display the max prop with a +.

123
999+

Hide Plus

You can hide the plus if you prefer, while still limiting the max number displayed

99

Hide Number

If you prefer not to show notification numbers, you can hide them.

Show Zero

By default, if you have 0 notifications, nothing will be displayed. You can override this by setting showZero to true.

0

Interactivity

Notifications are not interactive. If you wish to link to a notification page or open a menu, it is recommended you pass this as a child to the Notification component.

50

Customization

Classes

You can customize notifications further by passing a className prop, which will override any styles already set. (this will style the notification indicator, not the wrapping container)

50
Input Popover