Secondary Button
Lower-emphasis variant. Transparent background with brand-blue label. 'Add query' on /query is the canonical instance.
DO
Pair with Primary Button for a +1 add-another affordance.
DON'T
Mix more than two secondary buttons inline — the row loses a reading order.
Design
default
Transparent-ish bg, blue label, 14px medium.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<Button size="sm" variant="subtle">Add query</Button>Layout
| Property | Value |
|---|---|
| height | 36px control-height |
| padding | 8px 16px |
| font-weight | 500 |
Accessibility
| Keyboard | Standard button semantics. |
| Contrast | Brand-blue text on white passes AA. |