MudIconButton does not respect defined color when placed within an expanded & disabled MudExpansionPanel
#11,453 opened on Jun 4, 2025
Repository metrics
- Stars
- (10,394 stars)
- PR merge metrics
- (Avg merge 6d 6h) (108 merged PRs in 30d)
Description
Things to check
- I have searched the existing issues for this bug
- To rule out a caching problem I made sure the bug also happens in an incognito tab
Bug type
Component
Component name
MudIconButton, MudExpansionPanel
What happened?
Bug description
When a MudIconButton is placed inside a MudExpansionPanel with Disabled="true" and Expanded="true", it inherits the disabled styles (e.g., greyed-out appearance via .mud-disabled CSS class), even when explicitly set to Disabled="false". The MudIconButton Color property does not change the color of the icon button. In contrast, a MudButton in the same context does not inherit these disabled styles and renders with its intended color. This inconsistent behavior between MudIconButton and MudButton is unexpected, as both should respect their Disabled property and not be affected by the parent MudExpansionPanel's disabled state unless explicitly disabled.
Steps to reproduce
- Create a Blazor Server app using .NET 9 and MudBlazor v8.6.0.
- Add a
MudExpansionPanelwithDisabled="true". - Inside the
MudExpansionPanel, place aMudIconButtonwithDisabled="false"and aMudButtonwithDisabled="false", both using a specificColor(e.g.,Color.Primary). - Observe the rendering in a browser.
Example Code (in a .razor file):
@page "/test"
@using MudBlazor
@code {
// Tracks the click state for demonstration
private bool isClicked = false;
}
<MudExpansionPanel Disabled="true" Expanded="true">
<TitleContent>
<MudText>Disabled Expansion Panel</MudText>
</TitleContent>
<ChildContent>
<MudIconButton Icon="@Icons.Material.Filled.Info"
Color="Color.Primary"
Disabled="false"
OnClick="@(() => isClicked = !isClicked)"
Class="ma-4 mb-4"
aria-label="Info" />
<MudButton Color="Color.Primary"
Variant="Variant.Filled"
OnClick="@(() => isClicked = !isClicked)"
Class="ma-4 mb-4">
Regular Button
</MudButton>
<MudText>IconButton Clicked: @(isClicked ? "Yes" : "No")</MudText>
</ChildContent>
</MudExpansionPanel>
Expected behavior
- The MudIconButton should render with its specified Color (e.g., Color.Primary) within an expanded ExpansionPanel even when the ExpansionPanel Disabled property is set to true.
- The MudIconButton should behave consistently with MudButton, which renders with its specified Color and remains clickable, unaffected by the parent MudExpansionPanel's Disabled="true".
- Ideally, the
.mud-disabledclass would only apply to the TitleContent and not the ChildContent.
Reproduction link
https://try.mudblazor.com/snippet/QEwTaUEeLytopjyD
Reproduction steps
- Create a Blazor Server app using .NET 9 and MudBlazor v8.6.0.
- Add a
MudExpansionPanelwithDisabled="true". - Inside the
MudExpansionPanel, place aMudIconButtonwithDisabled="false"and aMudButtonwithDisabled="false", both using a specificColor(e.g.,Color.Primary). - Observe the rendering in a browser.
Example Code (in a .razor file):
@page "/test"
@using MudBlazor
@code {
// Tracks the click state for demonstration
private bool isClicked = false;
}
<MudExpansionPanel Disabled="true" Expanded="true">
<TitleContent>
<MudText>Disabled Expansion Panel</MudText>
</TitleContent>
<ChildContent>
<MudIconButton Icon="@Icons.Material.Filled.Info"
Color="Color.Primary"
Disabled="false"
OnClick="@(() => isClicked = !isClicked)"
Class="ma-4 mb-4"
aria-label="Info" />
<MudButton Color="Color.Primary"
Variant="Variant.Filled"
OnClick="@(() => isClicked = !isClicked)"
Class="ma-4 mb-4">
Regular Button
</MudButton>
<MudText>IconButton Clicked: @(isClicked ? "Yes" : "No")</MudText>
</ChildContent>
</MudExpansionPanel>
Relevant log output
Version (bug)
8.6.0
Version (working)
No response
What browsers are you seeing the problem on?
Edge
On which operating systems are you experiencing the issue?
Windows
Pull Request
- I would like to do a Pull Request
Code of Conduct
- I agree to follow this project's Code of Conduct