MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Badge

A badge is a useful way to wrap or overlay an action button or icon with a simple notification, making it easy to emphasize things like the number of notifications received.

See Badge API for parameter documentation.

Usage

3 99+

Bug Reports

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<div Class="d-flex justify-space-around flex-wrap mt-4">
    <MudBadge Content="3" Color="Color.Primary" Overlap="true" Class="mx-6 my-4">
        <MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Default" />
    </MudBadge>
    <MudBadge Content="100" Color="Color.Primary" Overlap="true" Class="mx-6 my-4">
        <MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Default" />
    </MudBadge>
    <MudBadge Icon="@Icons.Material.Filled.Lock" Color="Color.Error" Overlap="true" Bordered="true" Class="mx-6 my-4">
        <MudButton Color="Color.Error" Variant="Variant.Filled" DisableElevation="true">Security Issues</MudButton>
    </MudBadge>
    <MudBadge Dot="true" Color="Color.Info" Class="mx-6 my-4">
        <MudText>Bug Reports</MudText>
    </MudBadge>
</div>

Playground

MudIcon

MudButton

MudIconButton

MudText

Badge Options
Badge Content
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem md="8" Class="mud-text-align-center my-auto">
        <MudBadge Content="@BadgeContent" Color="Color.Primary" Overlap="@Overlap" Bottom="@Bottom" Start="@Start" Dot="@Dot" Bordered="@Bordered" Icon="@BadgeIcon">
            @if (SelectedTestComponent == "MudIcon")
            {
                <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Default" Size="Size.Large" />
            }
            else if (SelectedTestComponent == "MudButton")
            {
                <MudButton Color="Color.Primary" Variant="Variant.Filled">MudButton</MudButton>
            }
            else if (SelectedTestComponent == "MudIconButton")
            {
                <MudIconButton Icon="@Icons.Material.Filled.Email" Color="Color.Default" />
            }
            else if (SelectedTestComponent == "MudText")
            {
                <MudText>MudText</MudText>
            }
        </MudBadge>
    </MudItem>
    <MudItem md="4">
        <MudCard>
            <MudCardContent>
                <MudSelect  T="string" Label="Test Component" Dense="true" OffsetY="true" Value="@SelectedTestComponent" ValueChanged="OnSelectedTestComponent" Class="mb-4">
                    <MudSelectItem T="string"  Value="@("MudIcon")">MudIcon</MudSelectItem>
                    <MudSelectItem T="string" Value="@("MudButton")">MudButton</MudSelectItem>
                    <MudSelectItem T="string" Value="@("MudIconButton")">MudIconButton</MudSelectItem>
                    <MudSelectItem T="string" Value="@("MudText")">MudText</MudSelectItem>
                </MudSelect>
                <MudText Typo="Typo.subtitle2" GutterBottom="true">Badge Options</MudText>
                <MudCheckBox @bind-Checked="@Bottom" Label="Bottom" Color="Color.Primary" Style="width:100%;" />
                <MudCheckBox @bind-Checked="@Dot" Label="Dot" Color="Color.Primary" Style="width:100%;" />
                <MudCheckBox @bind-Checked="@Start" Label="Start" Color="Color.Primary" Style="width:100%;" />
                <MudCheckBox @bind-Checked="@Overlap" Label="Overlap" Color="Color.Primary" Style="width:100%;" />
                <MudCheckBox @bind-Checked="@Bordered" Label="Bordered" Color="Color.Primary" Style="width:100%;" />
                <MudCheckBox T="bool" CheckedChanged="AddIcon" Label="Icon" Color="Color.Primary" Style="width:100%;" />
                <MudText Typo="Typo.subtitle2" Class="my-2">Badge Content</MudText>
                <div style="display: flex;">
                    <MudButton OnClick="AddValue" Variant="Variant.Filled" Size="Size.Small" Color="Color.Primary" Style="width:100%;" Class="mr-1">Add @AddNumber</MudButton>
                    <MudButton OnClick="ClearContent" Variant="Variant.Filled" Size="Size.Small" Color="Color.Secondary" Style="width:100%;" Class="ml-1">Clear</MudButton>
                </div>
            </MudCardContent>
        </MudCard>
    </MudItem>
</MudGrid>
@code {
    public bool Bottom { get; set; }
    public bool Dot { get; set; }
    public bool Start { get; set; }
    public bool Overlap { get; set; }
    public bool Bordered { get; set; }
    public string BadgeIcon { get; set; }

    public string SelectedTestComponent { get; set; } = "MudIcon";
    public string AddNumber { get; set; } = "1";

    public int? BadgeContent { get; set; }

    public void OnSelectedTestComponent(string value)
    {
        SelectedTestComponent = value;
    }

    public void AddIcon()
    {
        if (String.IsNullOrEmpty(BadgeIcon))
        {
            BadgeIcon = Icons.Custom.Uncategorized.Radioactive;
        }
        else
        {
            BadgeIcon = null;
        }
    }

    public void AddValue()
    {
        if(BadgeContent == null)
        {
            AddNumber = "25";
            BadgeContent = 1;
        }
        else
        {
            BadgeContent += 25;
        }
    }

    public void ClearContent()
    {
        AddNumber = "1";
        BadgeContent = null;
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙