Attention Pill
Anatomy
A small accent-tinted pill that says "this wants a look". Two states, one component: the accent form (accent-12% fill, accent dot, accent text) draws the eye; the muted zero-state form spends no accent at all, so an empty count does not sit there glowing.
maud_ui::primitives::attention_pill
Props
Generated from public Rust fields. Defaults are evaluated from the implementation.
| Prop | Type | Default | Description |
|---|---|---|---|
label | String | "" | Caller-supplied label, e.g. 2 waiting on you. |
muted | bool | false | Render the muted zero-state (no accent) instead of the accent form. |
Examples
Wants attention
Accent-12% fill, accent dot, accent text — the one thing on the row the eye should land on.
Zero state — muted
Nothing waiting: the same pill spends no accent, so it recedes instead of glowing at an empty count.
Usage and composition
Import
use maud_ui::primitives::attention_pill::{self, Props};
Example
use maud_ui::primitives::attention_pill::{self, Props};
// Wants attention
attention_pill::render(Props { label: "2 waiting on you".into(), ..Default::default() });
// Zero state — recedes
attention_pill::render(Props { label: "all caught up".into(), muted: true });
When to use each
Reach for the accent form for a non-zero actionable count — the one thing on a row the eye should land on. Switch to muted: true at zero so the surface reads as calm rather than lit up at nothing.
CSS classes
mui-attention-pill(+mui-attention-pill--muted).mui-attention-pill__dot,mui-attention-pill__label.
Related
Badge, Status dot.
Accessibility
Supply meaningful labels, choose heading levels for the surrounding page, and preserve native link and form behavior. Keyboard focus follows document order. Motion honors reduced-motion preferences.