AttentionDot
AttentionDot flags that something needs attention: unread messages, a new reply, an update waiting. It is a single yes-or-no signal with no count (use Badge for counts). Wrap an icon or an icon button and the dot sits on its top-end corner, or place it on its own next to a label.
Demos
Basic
Wrap the element the dot belongs to; in a borderless button, wrap the icon instead so the dot stays on it. When the host is a button, say the state in the button’s own name (“Notifications, unread”); give label only when the dot has to speak for itself.
Type
accent is the canonical unread color and the default. success, warning and error take the same colors as field and message feedback; neutral is a quiet gray, for example for “offline”.
Size
Size is physical fit, not priority: every dot means the same thing. Use small only where medium doesn’t fit, such as a dense row or a small avatar.
Pulse
pulse repeats a slow ring around the dot for something that should not be missed. It stops when the user prefers reduced motion.
Show and hide
show removes the dot and keeps the element it marks.
Offset
offset moves the dot from its corner: positive x moves it outward, positive y down. Pull it in on round hosts so it touches the edge.
Standalone
Without children the dot renders inline, for example at the end of a navigation row.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
show | boolean | true | Hides the dot while keeping the wrapped element. | Unreleased |
type | accent | primary | neutral | info | success | warning | error | accent | Color role. | Unreleased |
size | small | medium | medium | Dot size. small only where medium doesn’t fit. | Unreleased |
pulse | boolean | false | Adds a slow, repeating pulse; off under prefers-reduced-motion. | Unreleased |
label | string | undefined | Accessible name of the dot (role="img"). Without it the dot is hidden from assistive tech. | Unreleased |
offset | [x, y] | undefined | Moves the dot from its corner. Numbers are px; strings are any CSS length. | Unreleased |
children | ReactNode | undefined | The element the dot sits on. Without it the dot renders inline. | Unreleased |
AttentionDot also accepts native span attributes and a ref; they go on the wrapper. size and type can be set for every dot through ConfigProvider’s componentOptions.AttentionDot.
AttentionDot is separate from Badge: Badge counts, AttentionDot only says “look here”, with its own look in each theme (an ink-outlined dot in Brutal, a dot with a soft halo in Elegant).