Chips - MudBlazor

Basic 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

Disabled

<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

<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

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

Outlined

Default

Primary

Secondary

Info

Server Storage

New Tweets

Radioactive Areas

<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

<MudChip Size="Size.Small">Small</MudChip>
<MudChip Size="Size.Medium">Medium</MudChip>
<MudChip Size="Size.Large">Large</MudChip>