Verdict Buttons · a row where one choice recolors the rest
Decision
01
One decision, three buttons, one selection
A single button has states. A row of buttons standing for one decision has a different problem: when one is picked, what happens to the rest? Here, picking the negative option breaks it out in red; picking either of the other two just marks it chosen, no alarm color. The row is the unit — not the button.
Reviewing this PR's agent-generated diff
No verdict yet — pick one.
Verdict row
Peer-exclusive selected state
Only [data-verdict="needs"] breaks from the shared teal-selected style into red. Approve and Reject are both final decisions — equally weighted, so they share the neutral treatment. Needs work isn't a verdict at all, it's a request for another pass, which is why it gets flagged rather than just marked.
Not living-styleguide-states.html: that page is one button's hover/focus/active/disabled. This is a row where selecting member A changes how members B and C are meant to read.
02
When there's no bad option
Not every decision has a red outcome. When the three choices are genuinely parallel — not pass/needs-work/fail but three equally valid directions — don't manufacture a negative one. Every selection shares the same neutral accent.
Routing this proposal
No route chosen yet.
All-neutral variant
Parallel alternatives, one accent
Same row mechanics — one selected at a time, whole row re-evaluates on click — but nothing here is a failure state, so nothing earns red. Violet stands in for "chosen," not "wrong."
Reach for the negative-highlight variant above only when one option genuinely means "this needs to change." Otherwise, one neutral selected color for the whole row.
Created for you, with ❤️ by Robert Evans· The AI Design Architect