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 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
Closable
Closable
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
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
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>
An unhandled error has occurred. Reload 🗙