MudBlazor/MudBlazor

MudIconButton does not respect defined color when placed within an expanded & disabled MudExpansionPanel

Open

#11,453 opened on Jun 4, 2025

View on GitHub
 (3 comments) (0 reactions) (0 assignees)C# (1,631 forks)batch import
buggood first issue

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

  1. Create a Blazor Server app using .NET 9 and MudBlazor v8.6.0.
  2. Add a MudExpansionPanel with Disabled="true".
  3. Inside the MudExpansionPanel, place a MudIconButton with Disabled="false" and a MudButton with Disabled="false", both using a specific Color (e.g., Color.Primary).
  4. 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-disabled class would only apply to the TitleContent and not the ChildContent.

Reproduction link

https://try.mudblazor.com/snippet/QEwTaUEeLytopjyD

Reproduction steps

  1. Create a Blazor Server app using .NET 9 and MudBlazor v8.6.0.
  2. Add a MudExpansionPanel with Disabled="true".
  3. Inside the MudExpansionPanel, place a MudIconButton with Disabled="false" and a MudButton with Disabled="false", both using a specific Color (e.g., Color.Primary).
  4. 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

Contributor guide