AttentionDot
StableA small amber dot that means a person has to do something.
Also known as notification dot, badge dot, unread indicator, indicator
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Beside text
The assistant wants to run a command on your computer
<div className="flex items-center gap-2 text-body leading-5 text-fg">
<AttentionDot label="Approval needed" />
<span>The assistant wants to run a command on your computer</span>
</div>The dot comes with a line saying what the person has to do.
When to use it
A tiny amber dot that means a person has to do something before work can go on. Amber is kept for this alone, so the dot always stands out.
Use it for
- A request waiting for approval.
- A chat or task in a list that is blocked on the person.
- A failed step that needs a decision.
Not for
- General warnings, or problems the system will fix by itself: use Callout.
- A full list of everything waiting on the person: use ApprovalInbox.
Do and avoid
2 invoices need your approval
Flights
Hotels
Car hire
Do
- Use it only when a person must act before work can go on.
- Put it next to words that say what is needed.
- Use a specific label like "Approval needed" when the default is too vague.
- Remove it as soon as the person has acted.
Avoid
- Do not use it for problems the system can fix on its own, or for general warnings.
- Do not use it alone. It must come with words.
- Do not change its color or add another amber element beside it.
- Do not use it as a decorative bullet.
On a phone
- The dot is a fixed 6px circle and is not tappable, on a phone or anywhere else.
- Place it on or next to a control that has the 44px target, and do not rely on the dot alone to be seen at arm's length.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Needs attention" | Accessible name for the dot, applied as aria-label. |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
--attention
Built in
- Screen readers read it as an image named "Needs attention", or your label.
- It does not move, so motion settings do not affect it.
- It cannot be pressed, and the Tab key skips it.
What you need to do
- Put words next to it that say what is needed.
- Give it a specific label, such as "Approval needed", when the default "Needs attention" is too vague.
- Remove it as soon as the person has acted.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide