Badge — Marai.UI

Overview

MBadge is beautiful by default. Write <MBadge Variant="Variant.Success">Approved</MBadge> and it renders with production-ready styling immediately. Use Variant to communicate status semantics, Size to control scale, and Class for custom overrides.

Usage

razor

@using Marai.UI.Components.MBadge

Basic Usage

Preview

Active Approved Pending Failed

razor

@using Marai.UI.Components.MBadge

<div class="flex flex-wrap gap-2">
    <MBadge>Active</MBadge>
    <MBadge Variant="Variant.Success">Approved</MBadge>
    <MBadge Variant="Variant.Warning">Pending</MBadge>
    <MBadge Variant="Variant.Destructive">Failed</MBadge>
</div>

Variants

Use Variant to communicate intent and status. Token-driven colors adapt automatically to your active theme.

Preview

Default Primary Secondary Destructive Outline Success Warning Info Muted

razor

@using Marai.UI.Components.MBadge

<div class="flex flex-wrap gap-2">
    <MBadge Variant="Variant.Default">Default</MBadge>
    <MBadge Variant="Variant.Primary">Primary</MBadge>
    <MBadge Variant="Variant.Secondary">Secondary</MBadge>
    <MBadge Variant="Variant.Destructive">Destructive</MBadge>
    <MBadge Variant="Variant.Outline">Outline</MBadge>
    <MBadge Variant="Variant.Success">Success</MBadge>
    <MBadge Variant="Variant.Warning">Warning</MBadge>
    <MBadge Variant="Variant.Info">Info</MBadge>
    <MBadge Variant="Variant.Muted">Muted</MBadge>
</div>

Sizes

Use Size to scale the badge. Defaults to Size.Default.

Preview

Xs Small Default Large

razor

@using Marai.UI.Components.MBadge

<div class="flex flex-wrap items-end gap-3">
    <MBadge Variant="Variant.Primary" Size="Size.Xs">Xs</MBadge>
    <MBadge Variant="Variant.Primary" Size="Size.Sm">Small</MBadge>
    <MBadge Variant="Variant.Primary" Size="Size.Default">Default</MBadge>
    <MBadge Variant="Variant.Primary" Size="Size.Lg">Large</MBadge>
</div>

Status Indicators

A real-world pattern: semantic badges communicating merchant and transaction state.

Preview

Merchant Status: Active

KYC: Pending Review

Transaction: Declined

Settlement: Processing

razor

@using Marai.UI.Components.MBadge

<div class="flex flex-wrap items-center gap-4">
    <div class="flex items-center gap-2">
        <span class="text-sm text-slate-600">Merchant Status:</span>
        <MBadge Variant="Variant.Success">Active</MBadge>
    </div>
    <div class="flex items-center gap-2">
        <span class="text-sm text-slate-600">KYC:</span>
        <MBadge Variant="Variant.Warning">Pending Review</MBadge>
    </div>
    <div class="flex items-center gap-2">
        <span class="text-sm text-slate-600">Transaction:</span>
        <MBadge Variant="Variant.Destructive">Declined</MBadge>
    </div>
    <div class="flex items-center gap-2">
        <span class="text-sm text-slate-600">Settlement:</span>
        <MBadge Variant="Variant.Info">Processing</MBadge>
    </div>
</div>

Common Examples

Notification Counts

Preview

razor

@using Marai.UI.Components.MBadge

<div class="flex items-center gap-6">
    <div class="relative inline-block">
        <svg class="h-6 w-6 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
            <path d="M13.73 21a2 2 0 0 1-3.46 0" />
        </svg>
        <MBadge Class="absolute -top-1 -right-2 inline-flex h-4 w-4 items-center justify-center rounded-full bg-red-600 text-white text-xs font-bold">3</MBadge>
    </div>
    <div class="relative inline-block">
        <svg class="h-6 w-6 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
            <polyline points="22,6 12,13 2,6" />
        </svg>
        <MBadge Class="absolute -top-1 -right-3 inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-600 text-white text-xs font-bold">12</MBadge>
    </div>
</div>

Feature Badges

Preview

Premium Plan PRO

New Feature BETA

Limited Offer SALE

razor

@using Marai.UI.Components.MBadge

<div class="flex flex-col gap-3">
    <div class="flex items-center gap-3">
        <span class="text-sm font-semibold text-slate-800">Premium Plan</span>
        <MBadge Class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-blue-600 text-white">PRO</MBadge>
    </div>
    <div class="flex items-center gap-3">
        <span class="text-sm font-semibold text-slate-800">New Feature</span>
        <MBadge Class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-cyan-500 text-white">BETA</MBadge>
    </div>
    <div class="flex items-center gap-3">
        <span class="text-sm font-semibold text-slate-800">Limited Offer</span>
        <MBadge Class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-yellow-400 text-slate-900">SALE</MBadge>
    </div>
</div>

List Items with Status

Preview

Task #1: Update documentation Done

Task #2: Fix navigation bug In Progress

Task #3: Add new component Todo

razor

@using Marai.UI.Components.MBadge

<div class="flex flex-col gap-3 max-w-md">
    <div class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3">
        <span class="text-sm text-slate-700">Task #1: Update documentation</span>
        <MBadge Class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-green-600 text-white">Done</MBadge>
    </div>
    <div class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3">
        <span class="text-sm text-slate-700">Task #2: Fix navigation bug</span>
        <MBadge Class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-yellow-400 text-slate-900">In Progress</MBadge>
    </div>
    <div class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3">
        <span class="text-sm text-slate-700">Task #3: Add new component</span>
        <MBadge Class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-slate-200 text-slate-600">Todo</MBadge>
    </div>
</div>

Safe Tailwind Overrides

The Class parameter is always last in class resolution — user-supplied classes win all conflicts.

Preview

With Shadow Uppercase Monospace

razor

@using Marai.UI.Components.MBadge

<div class="flex flex-wrap items-center gap-3">
    <MBadge Class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-semibold bg-blue-600 text-white shadow-md">With Shadow</MBadge>
    <MBadge Class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold uppercase tracking-widest bg-green-600 text-white">Uppercase</MBadge>
    <MBadge Class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-semibold font-mono bg-cyan-500 text-white">Monospace</MBadge>
</div>

Standard HTML Attributes

Preview

Online

razor

@using Marai.UI.Components.MBadge

<MBadge Class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-semibold bg-green-600 text-white"
        aria-label="User status"
        data-testid="status-badge">
    Online
</MBadge>

Accessibility

Badges use semantic <span> elements
Text content should be concise and meaningful
Use aria-label for icon-only badges or when the badge text needs clarification
Consider role="status" for live status indicators that update dynamically
Don't rely solely on color to convey meaning — always include text or icons

API Reference

Parameter	Type	Default	Description
Variant	Variant	`Variant.Default`	Semantic color and style. Maps to token-driven colors.
Size	Size	`Size.Default`	Padding and font-size preset.
ChildContent	RenderFragment?	`null`	Content rendered inside the badge (text, numbers, icons).
Class	string?	`null`	Additional Tailwind classes. User-supplied classes win all conflicts.
AdditionalAttributes	Dictionary<string, object>?	`null`	Any HTML attribute passed through to the root `<span>` element.