MudBlazor - Blazor Component Library

API

<MudChip>

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

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

Avatars

Avatar

<MudChip>
    <AvatarContent>
        <MudAvatar>
            <MudImage Src="images/toiletvisit.jpg"></MudImage>
        </MudAvatar>
    </AvatarContent>
    <ChildContent>Avatar</ChildContent>
</MudChip>

<MudChip>
    <AvatarContent>
        <MudAvatar>MK</MudAvatar>
    </AvatarContent>
    <ChildContent>Avatar</ChildContent>
</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>