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>

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>

Size

The default button size is Size.Medium and, by default, the icon size uses the button size.

<MudButton Variant="Variant.Filled" Size="Size.Small"  Color="Color.Primary">Small</MudButton>
<MudButton Variant="Variant.Filled" Size="Size.Medium" Color="Color.Secondary">Medium</MudButton>
<MudButton Variant="Variant.Filled" Size="Size.Large"  Color="Color.Tertiary">Large</MudButton>