Navbar
The three top-level nav buttons inside the header — Query, Alerts, Status. Active state uses solid brand-blue fill; inactive is transparent with light-gray text.
DO
Render exactly one active button at a time, matching the current top-level route.
DON'T
Use Navbar styling outside the header — in-page section nav should use Tab Control instead.
Design
active
Query
Current route — solid brand-blue fill, white label.
inactive
Alerts
Transparent background, light-gray label. Hover lightens label.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<a class="nav-btn" aria-current={isActive ? 'page' : undefined}>{label}</a>Layout
| Property | Value |
|---|---|
| height | 36px control-height |
| padding | 8px 16px |
| font-size | 14px |
| border-radius | 4px sm |
Accessibility
| ARIA | Use <a> with aria-current='page' on the active route, not a visual-only class. |
| Keyboard | Standard link semantics; focus ring inherits brand-blue. |