MudBlazor - Blazor Component Library

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

Closable

You can change the close icon with the CloseIcon prop.

Closable

<MudChip T="string" Color="Color.Default" OnClose="Closed">Closable</MudChip>
<MudChip T="string" Color="Color.Error" OnClose="Closed">Closable</MudChip>
<MudChip T="string" Color="Color.Primary" OnClose="Closed" CloseIcon="@Icons.Material.Filled.AlarmAdd">Closable</MudChip>
<MudChip T="string" Color="Color.Success" OnClose="Closed" CloseIcon="@Icons.Material.Filled.AlarmOn">Closable</MudChip>

@code {
    void Closed(MudChip<string> chip) {
        // react to chip closed
    }
}

Clickable

The OnClick handler provides the EventCallback for clicking on the body of the chip.

Clicked 0 times

<MudChip T="string" OnClick="OnChipClicked" Color="Color.Default">Clicked @ClickCount times</MudChip>

@code {
    private int ClickCount { get; set; }

    private void OnChipClicked()
    {
        ClickCount++;
    }
}

Icons

Extensions

Account

Your flight times

Verified User

<MudChip T="string" Icon="@Icons.Material.Filled.Dangerous" IconColor="Color.Error">Extensions</MudChip>
<MudChip T="string" Icon="@Icons.Material.Filled.Extension" Color="Color.Dark">Extensions</MudChip>
<MudChip T="string" Icon="@Icons.Material.Filled.Person" Color="Color.Primary">Account</MudChip>
<MudChip T="string" Icon="@Icons.Material.Filled.FlightTakeoff" Color="Color.Secondary">Your flight times</MudChip>
<MudChip T="string" Icon="@Icons.Material.Filled.VerifiedUser" Color="Color.Info">Verified User</MudChip>

Avatars

Avatar

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

<MudChip T="string">
    <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 T="string" Label="true">Default</MudChip>
<MudChip T="string" Icon="@Icons.Custom.Brands.MudBlazor" Label="true" Color="Color.Primary">MudBlazor</MudChip>
<MudChip T="string" Icon="@Icons.Custom.Brands.Twitter" Label="true" Color="Color.Info" OnClose="CloseChip">New Tweets</MudChip>
<MudChip T="string" 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 T="string" Size="Size.Small">Small</MudChip>
<MudChip T="string" Size="Size.Medium">Medium</MudChip>
<MudChip T="string" Size="Size.Large">Large</MudChip>