Tabs¶

MetrePay uses pill-style tab navigation (inspired by Stripe) for switching between views within the same context — payment methods, time periods, categories.

Pill Tabs¶

.tabs-container {
  display: flex;
  gap: 4px;
  background: #F1F1F1;             /* --mp-color-bg-page */
  padding: 4px;
  border-radius: 10px;             /* --mp-radius-lg */
  width: fit-content;
}

.tab {
  padding: 8px 16px;
  border-radius: 8px;              /* --mp-radius-md */
  font-family: 'Cabin', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #999999;                  /* --mp-color-text-muted */
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
}

.tab--active {
  background: #6E96FF;             /* --mp-color-blue */
  color: #FFFFFF;
  font-weight: 600;
}

.tab:hover:not(.tab--active) {
  color: #333333;
  background: rgba(110, 150, 255, 0.1);
}

Payment Method Tabs¶

Used to switch between payment methods in checkout:

<div style="display:flex; gap:4px; background:#F1F1F1; padding:4px; border-radius:10px; width:100%;">
  <button style="flex:1; padding:8px 16px; border-radius:8px; font-family:'Cabin',sans-serif; font-size:14px; font-weight:600; background:#6E96FF; color:white; border:none; cursor:pointer;">
    Card
  </button>
  <button style="flex:1; padding:8px 16px; border-radius:8px; font-family:'Cabin',sans-serif; font-size:14px; font-weight:500; background:transparent; color:#999; border:none; cursor:pointer;">
    Transfer
  </button>
  <button style="flex:1; padding:8px 16px; border-radius:8px; font-family:'Cabin',sans-serif; font-size:14px; font-weight:500; background:transparent; color:#999; border:none; cursor:pointer;">
    QR
  </button>
</div>

Underline Tabs (Dashboard)¶

For dashboard navigation with more items:

.tabs-underline {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #E5ECFB;
  margin-bottom: 24px;
}

.tab-underline {
  padding: 10px 16px;
  font-family: 'Cabin', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #999999;
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s ease;
}

.tab-underline--active {
  color: #6E96FF;
  font-weight: 600;
  border-bottom-color: #6E96FF;
}

.tab-underline:hover:not(.tab-underline--active) {
  color: #333333;
}

Rules¶

Tab rules

Use pill tabs for 2-5 options in a compact space
Use underline tabs for dashboard navigation with more items
Active tab is always blue (#6E96FF) — never purple
Tab container background is always #F1F1F1 (pill style)
Never use tabs for navigation between pages — use them for filtering/switching within a page
Tab labels should be short (1-2 words)