Badge

MD3 badge: a small dot or a short count attached to the corner of its anchor content (usually an icon), announcing new or unread items.

Small (dot)

size="small" renders a 6dp dot with no number — "something new".

New notification

<Badge size="small">
  <MailIcon />
</Badge>

Large (count)

The default size="large" shows value. Without a value no badge is drawn; 0 is shown as a number.

33 new notifications

4242 new notifications

00 new notifications

<Badge value={3}>
  <MailIcon />
</Badge>

Max

Values above max (default 999) render as {max}+. Keep max at 999 or below — MD3 limits a badge to four characters including the +.

999+999+ new notifications

99+99+ new notifications

<Badge value={100} max={99}>
  <MailIcon />
</Badge>

Label

The badge is announced through visually hidden text: "New notification" for a dot, "{n} new notifications" for a count. Pass label to describe it differently or to localize.

55 unread messages

New alert

<Badge value={count} label={`${count} unread messages`}>
  <MailIcon />
</Badge>

Visibility

visible={false} scales the badge out — typically once the user has seen what it points to — and removes it from the accessibility tree too.

55 new notifications

<Badge value={5} visible={!read}>
  <NotificationsIcon />
</Badge>

Accessibility

• The badge is not a live region: updating it does not interrupt the screen reader. Its description is read as part of the anchor's content (the visible digits themselves are hidden from assistive technology).
• The default English description is "New notification" (dot) or "{n} new notifications" (count, using the displayed value such as 999+). Override it with label.
• The hidden text sits right after the anchor content in reading order. When the anchor is an interactive element (an icon button, a navigation item), that element still needs its own accessible name.
• A hidden badge (visible={false}) is not announced.

Props

Prop	Type	Default	Description
children	ReactNode	—	Content the badge is attached to (e.g. an icon).
label	string	"New notification" for a dot, "{n} new notifications" for a count	Accessible description announced for the badge (rendered as visually hidden text right after the anchor content; the visible digits are hidden from assistive technology). Override it to localize.
max	number	999	Maximum value. Values above this show `{max}+`. Keep it at 999 or below — MD3 limits a badge to four characters including the `+`.
size	enum	large	Badge size. `"small"` renders a dot; `"large"` renders a label.
value	number	—	Number to display inside the badge. Ignored when `size="small"`.
visible	boolean	true	Whether the badge is visible. A hidden badge scales out and is then removed from the accessibility tree as well.