Minimalist Notification Dot Banner Block for React

The count is state in the component, started from INBOX.unread. Pass your own count in as a prop or from your data layer and call your API from markRead before you set the count to 0. The Sliding Number rolls every change, up as well as down, so a new message can roll it up again. Hide the bar when the count is 0 on a fresh load if you don't want the caught-up state.

Marking sets the count to 0 and the Sliding Number's digits roll to it with a CSS transition. After about 800 ms the sentence cross-fades to "You're all caught up" in the same grid cell: both sentences are always in the page, the inactive one is invisible and hidden from screen readers. With reduced motion the digits change in place and the sentence swaps at once.

To the "Open inbox" link, set before the count changes: the button goes quiet and is disabled once everything is read, and a disabled button can't keep focus. The sr-only status line is present from the start and announces "You're all caught up." when the sentence changes.

The unread dot is the Status component in its default tone, the foreground colour, which reads as "something is waiting" on every theme without bringing in an accent. When everything is read it fades to a faint muted tone. Pass variant="info" if you want a colour.

The row wraps and centres: the dot and the sentence on the first line, the link and the button on the second when they don't fit. Nothing scrolls sideways at 320 pixels, and in right-to-left layouts the order mirrors while the count keeps its digits in order.