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