MudBlazor

Chips

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

Filled Chips

The Chips, when disabled, differ from other components. Instead of using the disabled color, the opacity is lowered.

Default
Primary
Secondary
Info
Success
Warning
Error
Dark

Default
Primary
Secondary
Info
Success
Warning
Error
Dark
<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">Default</MudChip>
<MudChip Disabled="true" Color="Color.Primary">Primary</MudChip>
<MudChip Disabled="true" Color="Color.Secondary">Secondary</MudChip>
<MudChip Disabled="true" Color="Color.Info">Info</MudChip>
<MudChip Disabled="true" Color="Color.Success">Success</MudChip>
<MudChip Disabled="true" Color="Color.Warning">Warning</MudChip>
<MudChip Disabled="true" Color="Color.Error">Error</MudChip>
<MudChip Disabled="true" Color="Color.Dark">Dark</MudChip>

Text Chips

Text Chips also differ from other components where it has transparent background instead of fully transparent.

Default
Primary
Secondary
Info
Success
Warning
Error
Dark

Default
Primary
Secondary
Info
Success
Warning
Error
Dark
<MudChip Variant="Variant.Text">Default</MudChip>
<MudChip Variant="Variant.Text" Color="Color.Primary">Primary</MudChip>
<MudChip Variant="Variant.Text" Color="Color.Secondary">Secondary</MudChip>
<MudChip Variant="Variant.Text" Color="Color.Info">Info</MudChip>
<MudChip Variant="Variant.Text" Color="Color.Success">Success</MudChip>
<MudChip Variant="Variant.Text" Color="Color.Warning">Warning</MudChip>
<MudChip Variant="Variant.Text" Color="Color.Error">Error</MudChip>
<MudChip Variant="Variant.Text" Color="Color.Dark">Dark</MudChip>
<MudDivider />
<MudChip Disabled="true" Variant="Variant.Text">Default</MudChip>
<MudChip Disabled="true" Variant="Variant.Text" Color="Color.Primary">Primary</MudChip>
<MudChip Disabled="true" Variant="Variant.Text" Color="Color.Secondary">Secondary</MudChip>
<MudChip Disabled="true" Variant="Variant.Text" Color="Color.Info">Info</MudChip>
<MudChip Disabled="true" Variant="Variant.Text" Color="Color.Success">Success</MudChip>
<MudChip Disabled="true" Variant="Variant.Text" Color="Color.Warning">Warning</MudChip>
<MudChip Disabled="true" Variant="Variant.Text" Color="Color.Error">Error</MudChip>
<MudChip Disabled="true" Variant="Variant.Text" Color="Color.Dark">Dark</MudChip>

Outlined Chips

This looks and feels like outlined normaly do with a border and slightly transparent background on hover.

Default
Primary
Secondary
Info
Success
Warning
Error
Dark

Default
Primary
Secondary
Info
Success
Warning
Error
Dark
<MudChip Variant="Variant.Outlined">Default</MudChip>
<MudChip Variant="Variant.Outlined" Color="Color.Primary">Primary</MudChip>
<MudChip Variant="Variant.Outlined" Color="Color.Secondary">Secondary</MudChip>
<MudChip Variant="Variant.Outlined" Color="Color.Info">Info</MudChip>
<MudChip Variant="Variant.Outlined" Color="Color.Success">Success</MudChip>
<MudChip Variant="Variant.Outlined" Color="Color.Warning">Warning</MudChip>
<MudChip Variant="Variant.Outlined" Color="Color.Error">Error</MudChip>
<MudChip Variant="Variant.Outlined" Color="Color.Dark">Dark</MudChip>
<MudDivider />
<MudChip Disabled="true" Variant="Variant.Outlined">Default</MudChip>
<MudChip Disabled="true" Variant="Variant.Outlined" Color="Color.Primary">Primary</MudChip>
<MudChip Disabled="true" Variant="Variant.Outlined" Color="Color.Secondary">Secondary</MudChip>
<MudChip Disabled="true" Variant="Variant.Outlined" Color="Color.Info">Info</MudChip>
<MudChip Disabled="true" Variant="Variant.Outlined" Color="Color.Success">Success</MudChip>
<MudChip Disabled="true" Variant="Variant.Outlined" Color="Color.Warning">Warning</MudChip>
<MudChip Disabled="true" Variant="Variant.Outlined" Color="Color.Error">Error</MudChip>
<MudChip Disabled="true" Variant="Variant.Outlined" Color="Color.Dark">Dark</MudChip>

Closable

You can change the close icon with the CloseIcon prop.

Closable
Closable
Closable
Closable
<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
<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
<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..
    }
}

Sizes

Small
Medium
Large
<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 🗙