Notification Badge

A dot or count pinned to the corner of another element, such as an icon button, to show there is something new.

Dot

Wrap the element you want to mark. Without content, the badge is a dot. size sets the dot to 6, 8 or 10px.

The badge is visual only and is not announced. Put the same information in the anchor's accessible name, for example aria-label="Notifications, 3 unread".

Content

content shows a short count or label inside the badge, which grows to fit it. Keep it to a few characters, like 99+ or Dev.

3
12
99+
Dev

Placement

placement pins the badge to one of the four corners. It sits slightly outside the corner, with a ring in the page background color that separates it from the anchor.

Colors

2
2
2
2
2
2
2

Show and hide

show hides the badge without changing the layout of the anchor. Use it rather than conditionally rendering the wrapper.

4

Usage

Properties

childrenRequired
React.ReactNode

The element the badge is pinned to

content
React.ReactNode

Short text or number inside the badge. The badge is a dot when omitted

show
boolean

Whether the badge is visible

Default: true

placement
'top-right''top-left''bottom-right''bottom-left'

Corner of the anchor the badge is pinned to

Default: top-right

color
'red''blue''green''amber''purple''pink''gray'

Badge color

Default: red

size
'sm''md''lg'

Size of the dot or badge

Default: md

className
string

Additional CSS classes for the wrapper around the anchor

badgeClassName
string

Additional CSS classes for the badge, for example to nudge its position