Mudblazor

Community Support

Discord

Gitter

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

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Chips

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.
See also: ChipSet

Basic Chips

The Chips when disabled differ from other components, instead of disabled color it lowers the opacity.

Default
Primary
Secondary
Info
Success
Warning
Error
Dark

Disabled
Disabled
Disabled
Disabled
Disabled
Disabled
Disabled
Disabled
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChip>Default</MudChip>
<MudChip Color="Color.Primary">Primary</MudChip>
<MudChip Color="Color.Secondary">Secondary</MudChip>
<MudChip Color="Color.Info">Info</MudChip>
<MudChip Color="Color.Success">Success</MudChip>
<MudChip Color="Color.Warning">Warning</MudChip>
<MudChip Color="Color.Error">Error</MudChip>
<MudChip Color="Color.Dark">Dark</MudChip>
<MudDivider />
<MudChip Disabled="true">Disabled</MudChip>
<MudChip Disabled="true" Color="Color.Primary">Disabled</MudChip>
<MudChip Disabled="true" Color="Color.Secondary">Disabled</MudChip>
<MudChip Disabled="true" Color="Color.Info">Disabled</MudChip>
<MudChip Disabled="true" Color="Color.Success">Disabled</MudChip>
<MudChip Disabled="true" Color="Color.Warning">Disabled</MudChip>
<MudChip Disabled="true" Color="Color.Error">Disabled</MudChip>
<MudChip Disabled="true" Color="Color.Dark">Disabled</MudChip>

Closable

You can change the close icon with the CloseIcon prop.

Closable
Closable
Closable
Closable
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChip Color="Color.Default" OnClose="Closed">Closable</MudChip>
<MudChip Color="Color.Error" OnClose="Closed">Closable</MudChip>
<MudChip Color="Color.Primary" OnClose="Closed" CloseIcon="@Icons.Material.Filled.AlarmAdd">Closable</MudChip>
<MudChip Color="Color.Success" OnClose="Closed" CloseIcon="@Icons.Material.Filled.AlarmOn">Closable</MudChip>
@code {
    void Closed(MudChip chip) {
        // react to chip closed
    }
}

Icons

Extensions
Extensions
Account
Your flight times
Verified User
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChip Icon="@Icons.Material.Filled.Dangerous" IconColor="Color.Error">Extensions</MudChip>
<MudChip Icon="@Icons.Material.Filled.Extension" Color="Color.Dark">Extensions</MudChip>
<MudChip Icon="@Icons.Material.Filled.Person" Color="Color.Primary" >Account</MudChip>
<MudChip Icon="@Icons.Material.Filled.FlightTakeoff" Color="Color.Secondary" >Your flight times</MudChip>
<MudChip Icon="@Icons.Material.Filled.VerifiedUser" Color="Color.Info">Verified User</MudChip>

Label

Label Chips use the default theme border-radius.

Default
MudBlazor
New Tweets
Radioactive Areas
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChip Label="true">Default</MudChip>
<MudChip Icon="@Icons.Custom.Brands.MudBlazor" Label="true" Color="Color.Primary">MudBlazor</MudChip>
<MudChip Icon="@Icons.Custom.Brands.Twitter" Label="true" Color="Color.Info" OnClose="CloseChip">New Tweets</MudChip>
<MudChip Icon="@Icons.Custom.Uncategorized.Radioactive" Label="true" Color="Color.Warning" Style="color:black;">Radioactive Areas</MudChip>
@code {
    void CloseChip()
    {
        // Code..
    }
}

Outlined

Default
Primary
Secondary
Info
Server Storage
New Tweets
Radioactive Areas
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChip Variant="Variant.Outlined">Default</MudChip>
<MudChip Color="Color.Primary" Variant="Variant.Outlined">Primary</MudChip>
<MudChip Color="Color.Secondary" Variant="Variant.Outlined">Secondary</MudChip>
<MudChip Color="Color.Info" Variant="Variant.Outlined">Info</MudChip>
<MudChip Icon="@Icons.Material.Filled.Storage" Label="true" Color="Color.Dark" Variant="Variant.Outlined">Server Storage</MudChip>
<MudChip Icon="@Icons.Custom.Brands.Twitter" Label="true" Color="Color.Info" Variant="Variant.Outlined">New Tweets</MudChip>
<MudChip Icon="@Icons.Custom.Uncategorized.Radioactive" Label="true" Color="Color.Warning" IconColor="Color.Dark" Variant="Variant.Outlined">Radioactive Areas</MudChip>

Sizes

Small
Medium
Large
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChip Size="Size.Small">Small</MudChip>
<MudChip Size="Size.Medium">Medium</MudChip>
<MudChip Size="Size.Large">Large</MudChip>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙