Tags & Badges¶

Tags and badges communicate status, category, and metadata at a glance. MetrePay uses pill-shaped tags with semantic color coding.

Tag Variants¶

Active Recurrent Paid Pending Failed

Variant	Background	Text	Usage
Blue	`#EBF0FF`	`#6687DC`	Active, single payment, info
Purple	`#F9EEFF`	`#5C0390`	Recurrent, subscription
Success	`#d1fae5`	`#065f46`	Paid, completed, confirmed
Warning	`#fef3c7`	`#92400e`	Pending, processing, review
Error	`rgba(248,215,218,1)`	`#c80000`	Failed, rejected, error

CSS Implementation¶

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;            /* --mp-radius-full */
  font-family: 'Cabin', sans-serif;
  font-size: 12px;                  /* --mp-font-size-xs */
  font-weight: 600;
  white-space: nowrap;
}

.tag--blue    { background: #EBF0FF; color: #6687DC; }
.tag--purple  { background: #F9EEFF; color: #5C0390; }
.tag--success { background: #d1fae5; color: #065f46; }
.tag--warning { background: #fef3c7; color: #92400e; }
.tag--error   { background: rgba(248,215,218,1); color: #c80000; }

Bulma Implementation¶

<!-- Bulma tags with MetrePay overrides -->
<span class="tag" style="background:#EBF0FF; color:#6687DC; border-radius:9999px; font-family:'Cabin',sans-serif; font-weight:600;">Active</span>
<span class="tag" style="background:#d1fae5; color:#065f46; border-radius:9999px; font-family:'Cabin',sans-serif; font-weight:600;">Paid</span>
<span class="tag" style="background:#fef3c7; color:#92400e; border-radius:9999px; font-family:'Cabin',sans-serif; font-weight:600;">Pending</span>
<span class="tag" style="background:rgba(248,215,218,1); color:#c80000; border-radius:9999px; font-family:'Cabin',sans-serif; font-weight:600;">Failed</span>

Tailwind Implementation¶

<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-mp-blue-light text-mp-blue-hover">Active</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">Paid</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">Pending</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">Failed</span>

Usage in Tables¶

<table style="font-family:'Cabin',sans-serif; width:100%; border-collapse:collapse;">
  <tr style="border-bottom:1px solid #E5ECFB;">
    <td style="padding:12px 16px; font-size:14px; color:#333;">Invoice #1042</td>
    <td style="padding:12px 16px; font-size:14px; color:#666;">$150.00</td>
    <td style="padding:12px 16px;">
      <span style="display:inline-flex; align-items:center; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:600; background:#d1fae5; color:#065f46;">Paid</span>
    </td>
  </tr>
  <tr style="border-bottom:1px solid #E5ECFB;">
    <td style="padding:12px 16px; font-size:14px; color:#333;">Invoice #1043</td>
    <td style="padding:12px 16px; font-size:14px; color:#666;">$75.00</td>
    <td style="padding:12px 16px;">
      <span style="display:inline-flex; align-items:center; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:600; background:#fef3c7; color:#92400e;">Pending</span>
    </td>
  </tr>
</table>

Rules¶

Tag rules

Always use border-radius: 9999px (pill shape) for tags
Always use font-size: 12px and font-weight: 600
Use semantic colors — never use blue for a "failed" state
Tags should be short — 1-2 words maximum
Never use tags as buttons — they are read-only status indicators