Badges

Primary Secondary Success Danger Warning Info Light Dark

<MudBadge Content="@BadgeContent" Color="Color.Primary"></MudBadge>
<MudBadge Content="@BadgeContent2" Color="Color.Secondary"></MudBadge>
<MudBadge Content="@BadgeContent3" Color="Color.Success"></MudBadge>
<MudBadge Content="@BadgeContent4" Color="Color.Error"></MudBadge>
<MudBadge Content="@BadgeContent5" Color="Color.Warning"></MudBadge>
<MudBadge Content="@BadgeContent6" Color="Color.Info"></MudBadge>
<MudBadge Content="@BadgeContent7" Class="bg-light mud-dark-text br-4"></MudBadge>
<MudBadge Content="@BadgeContent8" Class="bg-dark mud-white-text br-4"></MudBadge>

@code {
    public string BadgeContent { get; set; } = "Primary";
    public string BadgeContent2 { get; set; } = "Secondary";
    public string BadgeContent3 { get; set; } = "Success";
    public string BadgeContent4 { get; set; } = "Danger";
    public string BadgeContent5 { get; set; } = "Warning";
    public string BadgeContent6 { get; set; } = "Info";
    public string BadgeContent7 { get; set; } = "Light";
    public string BadgeContent8 { get; set; } = "Dark";
}

Pill badges

Primary Secondary Success Danger Warning Info Light Dark

<MudBadge Content="@BadgeContent" Color="Color.Primary" class="badge-pill" ></MudBadge>
<MudBadge Content="@BadgeContent2" Color="Color.Secondary" class="badge-pill" ></MudBadge>
<MudBadge Content="@BadgeContent3" Color="Color.Success" class="badge-pill" ></MudBadge>
<MudBadge Content="@BadgeContent4" Color="Color.Error" class="badge-pill" ></MudBadge>
<MudBadge Content="@BadgeContent5" Color="Color.Warning" class="badge-pill" ></MudBadge>
<MudBadge Content="@BadgeContent6" Color="Color.Info" class="badge-pill" ></MudBadge>
<MudBadge Content="@BadgeContent7" Class="bg-light badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent8" Class="bg-dark badge-pill"></MudBadge>

@code {
    public string BadgeContent { get; set; } = "Primary";
    public string BadgeContent2 { get; set; } = "Secondary";
    public string BadgeContent3 { get; set; } = "Success";
    public string BadgeContent4 { get; set; } = "Danger";
    public string BadgeContent5 { get; set; } = "Warning";
    public string BadgeContent6 { get; set; } = "Info";
    public string BadgeContent7 { get; set; } = "Light";
    public string BadgeContent8 { get; set; } = "Dark";
}

Light Badges

Primary Secondary Success Danger Warning Info Light Dark

<MudBadge Content="@BadgeContent" Class="bg-primary-transparent br-4"></MudBadge>
<MudBadge Content="@BadgeContent2" Class="bg-secondary-transparent br-4"></MudBadge>
<MudBadge Content="@BadgeContent3" Class="bg-success-transparent br-4"></MudBadge>
<MudBadge Content="@BadgeContent4" Class="bg-danger-transparent br-4"></MudBadge>
<MudBadge Content="@BadgeContent5" Class="bg-warning-transparent br-4"></MudBadge>
<MudBadge Content="@BadgeContent6" Class="bg-info-transparent br-4"></MudBadge>
<MudBadge Content="@BadgeContent7" Class="bg-light-transparent br-4"></MudBadge>
<MudBadge Content="@BadgeContent8" Class="bg-dark-transparent br-4"></MudBadge>

@code {
    public string BadgeContent { get; set; } = "Primary";
    public string BadgeContent2 { get; set; } = "Secondary";
    public string BadgeContent3 { get; set; } = "Success";
    public string BadgeContent4 { get; set; } = "Danger";
    public string BadgeContent5 { get; set; } = "Warning";
    public string BadgeContent6 { get; set; } = "Info";
    public string BadgeContent7 { get; set; } = "Light";
    public string BadgeContent8 { get; set; } = "Dark";
}

Light Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

<MudBadge Content="@BadgeContent" Class="bg-primary-transparent badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent2" Class="bg-secondary-transparent badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent3" Class="bg-success-transparent badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent4" Class="bg-danger-transparent badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent5" Class="bg-warning-transparent badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent6" Class="bg-info-transparent badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent7" Class="bg-light-transparent badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent8" Class="bg-dark-transparent badge-pill"></MudBadge>

@code {
    public string BadgeContent { get; set; } = "Primary";
    public string BadgeContent2 { get; set; } = "Secondary";
    public string BadgeContent3 { get; set; } = "Success";
    public string BadgeContent4 { get; set; } = "Danger";
    public string BadgeContent5 { get; set; } = "Warning";
    public string BadgeContent6 { get; set; } = "Info";
    public string BadgeContent7 { get; set; } = "Light";
    public string BadgeContent8 { get; set; } = "Dark";
}

Gradient Badges

Primary Secondary Success Danger Warning Info Orange Purple

<MudBadge Content="@BadgeContent" Class="bg-primary-gradient br-4"></MudBadge>
<MudBadge Content="@BadgeContent2" Class="bg-secondary-gradient br-4"></MudBadge>
<MudBadge Content="@BadgeContent3" Class="bg-success-gradient br-4"></MudBadge>
<MudBadge Content="@BadgeContent4" Class="bg-danger-gradient br-4"></MudBadge>
<MudBadge Content="@BadgeContent5" Class="bg-warning-gradient br-4"></MudBadge>
<MudBadge Content="@BadgeContent6" Class="bg-info-gradient br-4"></MudBadge>
<MudBadge Content="@BadgeContent9" Class="bg-orange-gradient br-4"></MudBadge>
<MudBadge Content="@BadgeContent10" Class="bg-purple-gradient br-4"></MudBadge>

@code {
    public string BadgeContent { get; set; } = "Primary";
    public string BadgeContent2 { get; set; } = "Secondary";
    public string BadgeContent3 { get; set; } = "Success";
    public string BadgeContent4 { get; set; } = "Danger";
    public string BadgeContent5 { get; set; } = "Warning";
    public string BadgeContent6 { get; set; } = "Info";
    public string BadgeContent9 { get; set; } = "Orange";
    public string BadgeContent10 { get; set; } = "Purple";
}

Gradient Pill Badges

Primary Secondary Success Danger Warning Info Orange Purple

<MudBadge Content="@BadgeContent" Class="bg-primary-gradient badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent2" Class="bg-secondary-gradient badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent3" Class="bg-success-gradient badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent4" Class="bg-danger-gradient badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent5" Class="bg-warning-gradient badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent6" Class="bg-info-gradient badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent9" Class="bg-orange-gradient badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent10" Class="bg-purple-gradient badge-pill"></MudBadge>

@code {
    public string BadgeContent { get; set; } = "Primary";
    public string BadgeContent2 { get; set; } = "Secondary";
    public string BadgeContent3 { get; set; } = "Success";
    public string BadgeContent4 { get; set; } = "Danger";
    public string BadgeContent5 { get; set; } = "Warning";
    public string BadgeContent6 { get; set; } = "Info";
    public string BadgeContent9 { get; set; } = "Orange";
    public string BadgeContent10 { get; set; } = "Purple";
}

Outline Badges

Primary Secondary Success Danger Warning Info Light Dark

<MudBadge Content="@BadgeContent" Class="bg-outline-primary br-4"></MudBadge>
<MudBadge Content="@BadgeContent2" Class="bg-outline-secondary br-4"></MudBadge>
<MudBadge Content="@BadgeContent3" Class="bg-outline-success br-4"></MudBadge>
<MudBadge Content="@BadgeContent4" Class="bg-outline-danger br-4"></MudBadge>
<MudBadge Content="@BadgeContent5" Class="bg-outline-warning br-4"></MudBadge>
<MudBadge Content="@BadgeContent6" Class="bg-outline-info br-4"></MudBadge>
<MudBadge Content="@BadgeContent7" Class="bg-outline-light br-4"></MudBadge>
<MudBadge Content="@BadgeContent8" Class="bg-outline-dark br-4"></MudBadge>

@code {
    public string BadgeContent { get; set; } = "Primary";
    public string BadgeContent2 { get; set; } = "Secondary";
    public string BadgeContent3 { get; set; } = "Success";
    public string BadgeContent4 { get; set; } = "Danger";
    public string BadgeContent5 { get; set; } = "Warning";
    public string BadgeContent6 { get; set; } = "Info";
    public string BadgeContent7 { get; set; } = "Light";
    public string BadgeContent8 { get; set; } = "Dark";
}

Outline Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

<MudBadge Content="@BadgeContent" Class="bg-outline-primary badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent2" Class="bg-outline-secondary badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent3" Class="bg-outline-success badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent4" Class="bg-outline-danger badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent5" Class="bg-outline-warning badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent6" Class="bg-outline-info badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent7" Class="bg-outline-light badge-pill"></MudBadge>
<MudBadge Content="@BadgeContent8" Class="bg-outline-dark badge-pill"></MudBadge>

@code {
    public string BadgeContent { get; set; } = "Primary";
    public string BadgeContent2 { get; set; } = "Secondary";
    public string BadgeContent3 { get; set; } = "Success";
    public string BadgeContent4 { get; set; } = "Danger";
    public string BadgeContent5 { get; set; } = "Warning";
    public string BadgeContent6 { get; set; } = "Info";
    public string BadgeContent7 { get; set; } = "Light";
    public string BadgeContent8 { get; set; } = "Dark";
}

Buttons With Badges

<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="my-1 me-2">
Notifications
<MudBadge Content="4" Color="Color.Secondary" Class="ms-2"></MudBadge>
</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" Class="my-1 me-2">
Notifications
<MudBadge Content="7" Color="Color.Primary" Class="ms-2"></MudBadge>
</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Success" Class="my-1 me-2">
Notifications
<MudBadge Content="12" Color="Color.Error" Class="ms-2"></MudBadge>
</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Info" Class="bmy-1 me-2">
Notifications
<MudBadge Content="32" Color="Color.Warning" Class="ms-2"></MudBadge>
</MudButton>

Outline Button Badges

<MudButton Variant="Variant.Outlined" Class="btn-outline-primary my-1 me-2">
Notifications
<MudBadge Content="4" Class="ms-2"></MudBadge>
</MudButton>
<MudButton Variant="Variant.Outlined" Class="btn-outline-secondary my-1 me-2">
Notifications
<MudBadge Content="7" Class="ms-2"></MudBadge>
</MudButton>
<MudButton Variant="Variant.Outlined" Class="btn-outline-success my-1 me-2">
Notifications
<MudBadge Content="12" Class="ms-2"></MudBadge>
</MudButton>
<MudButton Variant="Variant.Outlined" Class="bbtn-outline-info my-1 me-2">
Notifications
<MudBadge Content="32" Class="ms-2"></MudBadge>
</MudButton>

Headings

Example heading New

<MudText Typo="Typo.h1">Example heading <MudBadge Content="@BadgeContent11" Color="Color.Primary"></MudBadge></MudText>
<MudText Typo="Typo.h2">Example heading <MudBadge Content="@BadgeContent11" Color="Color.Primary"></MudBadge></MudText>
<MudText Typo="Typo.h3">Example heading <MudBadge Content="@BadgeContent11" Color="Color.Primary"></MudBadge></MudText>
<MudText Typo="Typo.h4">Example heading <MudBadge Content="@BadgeContent11" Color="Color.Primary"></MudBadge></MudText>
<MudText Typo="Typo.h5">Example heading <MudBadge Content="@BadgeContent11" Color="Color.Primary"></MudBadge></MudText>
<MudText Typo="Typo.h6">Example heading <MudBadge Content="@BadgeContent11" Color="Color.Primary"></MudBadge></MudText>

@code {
    public string BadgeContent11 { get; set; } = "New";
}

Positioned Badges

99+

<MudBadge Content="100" Color="Color.Error" Overlap="true" Class="mx-3">
<MudButton Color="Color.Secondary" Variant="Variant.Filled">Inbox</MudButton>
</MudBadge>
<MudBadge Color="Color.Success" Bordered="true" Overlap="true" Class="mx-3">
<MudButton Class="btn-secondary" Variant="Variant.Filled">Profile</MudButton>
</MudBadge>
<MudBadge Color="Color.Success" Dot="true" Overlap="true" Bordered="true" Class="mx-3">
<MudAvatar Size="Size.Medium" Rounded="true" Class="me-2">
<MudImage Src="../assets/images/faces/2.jpg" Alt="img" />
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Success" Dot="true" Overlap="true" Bordered="true" Class="mx-3">
<MudAvatar Size="Size.Medium">
<MudImage Src="../assets/images/faces/15.jpg"/>
</MudAvatar>
</MudBadge>
<MudBadge Content="1000" Color="Color.Info" Overlap="true" Class="mx-3">
<MudAvatar Size="Size.Medium">
<MudImage Src="../assets/images/faces/10.jpg"/>
</MudAvatar>
</MudBadge>

Custom Badges

Hot 14 13.2k Inbox 32

<MudBadge Content="@BadgeContent12" Class="bg-outline-secondary br-4 d-flex">
<MudIcon Icon="ti ti-flame me-1 d-inline-block" />
</MudBadge>
<MudBadge Content="14" Color="Color.Success" Overlap="true" Class="mx-3 icon-badge">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
</MudBadge>
<MudBadge Content="@BadgeContent13" Class="bg-light-transparent border br-4 d-flex">
<MudIcon Icon="fe fe-eye me-1" Color="Color.Default" />
</MudBadge>
<MudBadge Content="32" Color="Color.Success" Overlap="true" Class="mx-3">
Inbox
</MudBadge>

@code {
    public string BadgeContent12 { get; set; } = "Hot";
    public string BadgeContent13 { get; set; } = "13.2k";
}