Unread
A small dot marking something as new or unread.
Unread is a blue dot that flags an item the reader has not seen yet — a notification, a message, a nav entry with new activity. It carries no count; for a number, use Badge.
<span>Notifications</span>
<Unread />The dot draws a ring in the --bg custom property so it reads cleanly against
its surface. Any bg-* class sets --bg for its children (the utility ships in
@base-org/bds-web/styles.css), so the ring usually matches on its own; set
--bg on a parent yourself when the background comes from elsewhere.
When to use
Use Unread to flag an item the reader has not seen yet, with no count.
Use something else when:
Usage
Do
Place it beside the label or item it marks, so it is clear what is unread.
Props
Unread forwards any span props to its root element and adds no props of its
own.
Accessibility
Unread renders a decorative span with no text or role, so it announces
nothing on its own. Put the meaning in the item it marks — for example
aria-label="Notifications, unread" — so non-visual users get the same signal.