Notification Badge
A count on the corner of an icon button. It springs out of the bell, and when it’s all read, it rolls down to zero and goes back in.
Usage
import { NotificationBadge } from '@wdzyi/ui';
<NotificationBadge count={unread} onClick={openInbox} />Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- countnumber
- How many there are. Going to zero rolls it down and puts it back in the bell.
- labelstring = 'Notifications'
- Names the button. The count is added to it, as in Notifications, 3 new.
- maxnumber = 99
- The most it shows. Past it, it reads 99+.
- iconReactNode
- The button’s icon. A bell by default.
- size32 | 40 | 48 | 56 = 40
- The button’s width and height. The icon and the badge follow.
Notes
- The badge hangs off the top right corner and grows outwards, so two or three digits never cover the icon. Its ring is the card’s colour, so it looks cut out of the corner. Its digits are Number Pop’s, so only the ones that changed flip over, while the badge gives a small bump.
- Going to zero rolls the count down a number at a time, each step a little longer than the last, from 40ms to 180ms, so twelve takes just over a second. After a beat at zero, it takes a small breath and is drawn into the bell over 460ms, and the bell rocks six degrees and settles.
- Coming and going are transitions, so they carry on from wherever they’re interrupted: a new one arriving while it rolls or goes brings it straight back, however quickly the two follow each other.
- It sends notify when the count goes up, and success as the badge goes into the bell. The button says the count, so the badge itself is hidden from screen readers. It takes everything a button does.
- With reduced motion, the badge appears and goes without moving, and the bell keeps still.