MudBlazor - Blazor Component Library

Filled Buttons

Filled Buttons have elevation (box shadow) and is raised on click by default.

<MudButton Variant="Variant.Filled">Default</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary">Primary</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Secondary">Secondary</MudButton>
<MudButton Variant="Variant.Filled" Disabled="true">Disabled</MudButton>

Drop Shadow

The drop shadow, sometimes also called elevation, can be controlled with the DropShadow bool.Color property only applies to the text.

<MudButton Variant="Variant.Filled" DropShadow="false" Color="Color.Primary">Disable elevation</MudButton>

Text Buttons

Text Buttons have no drop shadow, background or border and only hover effect is used. The Color property only applies to the text.

<MudButton Variant="Variant.Text">Default</MudButton>
<MudButton Variant="Variant.Text" Color="Color.Primary">Primary</MudButton>
<MudButton Variant="Variant.Text" Color="Color.Secondary">Secondary</MudButton>
<MudButton Variant="Variant.Text" Disabled="true">Disabled</MudButton>

Outlined Buttons

Outlined Buttons are similar to Text Buttons except for the border that inherits its color from the set Color property.

<MudButton Variant="Variant.Outlined">Default</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Primary">Primary</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Secondary">Secondary</MudButton>
<MudButton Variant="Variant.Outlined" Disabled="true">Disabled</MudButton>