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>

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.8

An error has occurred. This application may no longer respond until reloaded. Reload 🗙