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

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