Primary Button
Solid brand-blue button for the single most important action on a page. 'Execute' on /query is the canonical instance.
DO
One primary button per view — the single action the page is designed around.
DON'T
Use primary styling for destructive actions. Destructive actions need their own red variant (not yet defined).
Design
default
Brand-blue fill, white label, 14px semi-bold.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<Button size="sm" variant="filled">Execute</Button>Layout
| Property | Value |
|---|---|
| height | 36px control-height |
| padding | 0 18px primary-button-padding-x |
| font-weight | 600 |
| border-radius | 4px sm |
Accessibility
| Keyboard | Enter/Space activate; focus ring inherits brand-blue. |
| Contrast | White on brand-blue passes AA for 14px bold body. |