Prometheus Design System

Tab Control

Mantine Tabs — flat, underline-style. /query's Table / Graph / Explain. Active tab has a 2px brand-blue underline; inactive tabs are underline-transparent.

DO

Use for 2–5 parallel views of the same data.

DON'T

Use for navigation between routes — that's Navbar.

Design

default

TableGraphExplain

Inline tab bar. Underline indicates the active pane.

Component reference (screenshots)
/query
/query light

Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.

Implementation

<Tabs defaultValue="table">
  <Tabs.List><Tabs.Tab value="table">Table</Tabs.Tab>…</Tabs.List>
  <Tabs.Panel value="table">…</Tabs.Panel>
</Tabs>

Layout

PropertyValue
padding10px 16px
active-underline2px solid brand-blue brand-blue

Accessibility

ARIAUse role='tab' / role='tabpanel' / aria-selected.
KeyboardArrow keys move focus; Enter/Space activate.