Notification badge
The small red count or dot sitting on the corner of an icon, telling you something is waiting for you.
See it
What it is
Two flavors of the same idea. The count badge is a small pill with a number, capped at something like '99+'. The dot badge carries no number and only says 'something changed here'. The overlap is the whole visual trick: the badge sits on the icon's corner, clipping into it, so it reads as attached rather than adjacent. A thin ring in the page background color keeps it legible against busy icons.
Use one only when the number changes what someone does next. A badge is an interrupt with no snooze, and a count that never reaches zero teaches people to stop looking at that part of your nav entirely. Prefer the dot when the exact number is not actionable.
The usual mistake is accessibility. A bare '3' inside a button gets announced as 'Inbox 3', which means nothing, so put the meaning in the accessible name ('Inbox, 3 unread') and mark the visual badge aria-hidden. The other one is timing: clear the count when the items are actually read, not when the icon is clicked, or the badge starts lying and people stop trusting it.
Ask AI for it
Add a notification badge to an icon button: a pill positioned absolute at the icon's top-right corner, overlapping it by roughly a quarter of its size, with a red background, white 11px semibold text, fully rounded corners, an 18px minimum square, and a 2px ring in the page background color so it separates from the icon behind it. Display the count up to 99 and render '99+' above that, and fall back to a plain 6px dot when there is activity but no meaningful number. Hide the badge entirely at zero. Set the button's aria-label to 'Notifications, 3 unread' and mark the badge itself aria-hidden. Animate the badge in with a fast spring scaling from 0.6 to 1 whenever the count rises.