MudBlazor

Button

A Material Design Button for actions, links and commands. The Mudbutton component is a button with material design theme and comes with multiple functions.

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>

Elevation can be removed with the DisableElevation bool.

<MudButton Variant="Variant.Filled" DisableElevation="true" Color="Color.Primary">Disable elevation</MudButton>

Text Buttons

Text Buttons have no elevation, 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>

FullWidth

FullWidth buttons extend to 100% of available width.

<MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true">Full Width Button</MudButton>

Sizes

<MudContainer>
    <MudButton Variant="Variant.Text" Size="Size.Small" Class="ma-2">Small</MudButton>
    <MudButton Variant="Variant.Text" Size="Size.Medium" Class="ma-2">Medium</MudButton>
    <MudButton Variant="Variant.Text" Size="Size.Large" Class="ma-2">Large</MudButton>
</MudContainer>
<MudContainer>
    <MudButton Variant="Variant.Outlined" Size="Size.Small" Color="Color.Secondary" Class="ma-2">Small</MudButton>
    <MudButton Variant="Variant.Outlined" Size="Size.Medium" Color="Color.Secondary" Class="ma-2">Medium</MudButton>
    <MudButton Variant="Variant.Outlined" Size="Size.Large" Color="Color.Secondary" Class="ma-2">Large</MudButton>
</MudContainer>
<MudContainer>
    <MudButton Variant="Variant.Filled" Size="Size.Small" Color="Color.Primary" Class="ma-2">Small</MudButton>
    <MudButton Variant="Variant.Filled" Size="Size.Medium" Color="Color.Primary" Class="ma-2">Medium</MudButton>
    <MudButton Variant="Variant.Filled" Size="Size.Large" Color="Color.Primary" Class="ma-2">Large</MudButton>
</MudContainer>
<MudContainer>
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Small" Class="ma-2"></MudIconButton>
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Medium" Class="ma-2"></MudIconButton>
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Large" Class="ma-2"></MudIconButton>
</MudContainer>

Icons and labels

<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Delete" Color="Color.Error">Delete</MudButton>
<MudButton Variant="Variant.Filled" EndIcon="@Icons.Material.Filled.Send" Color="Color.Primary">Send</MudButton>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Warning">Warning</MudButton>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Mic" Disabled="true">Talk</MudButton>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Save" Color="Color.Info"  Size="Size.Small">Save</MudButton>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Save" IconColor="Color.Secondary" Size="Size.Large">Save</MudButton>

Customized Buttons

<MudButton Variant="Variant.Filled" EndIcon="@Icons.Material.Filled.ArrowDownward" Style="background-color: yellowgreen; color: white; width: 200px; height: 60px;">
    Download Now
</MudButton>
<MudButton Link="https://github.com/MudBlazor/MudBlazor"
           Target="_blank"
           Variant="Variant.Filled"
           EndIcon="@Icons.Custom.Brands.GitHub"
           Color="Color.Primary"
           Disabled=@disabled>
    GitHub Link
</MudButton>
<MudButton Link="https://github.com/MudBlazor/MudBlazor"
           Target="_blank"
           Variant="Variant.Text"
           EndIcon="@Icons.Custom.Brands.GitHub"
           Color="Color.Secondary"
           Style="text-transform:none"
           Disabled=@disabled>
    GitHub Link
</MudButton>
<MudButton Link="https://github.com/MudBlazor/MudBlazor"
           Target="_blank"
           Variant="Variant.Outlined"
           EndIcon="@Icons.Custom.Brands.GitHub"
           Color="Color.Tertiary"
           Disabled=@disabled>
    GitHub Link
</MudButton>
<br />
<MudSwitch Color="Color.Primary" @bind-Checked=@(disabled) Label="Disable" />
@code{
    bool disabled = false;
}

Loading Button

<MudButton Disabled="@_processing" OnClick="ProcessSomething" Variant="Variant.Filled" Color="Color.Primary">
    @if (_processing)
    {
        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
        <MudText Class="ms-2">Processing</MudText>
    }
    else
    {
        <MudText>Click me</MudText>
    }
</MudButton>
@code {
    private bool _processing = false;

    async Task ProcessSomething()
    {
        _processing = true;
        await Task.Delay(2000);
        _processing = false;
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙