Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

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.

See Button API for parameter documentation.

Filled Buttons

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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true">Full Width Button</MudButton>

Sizes

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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>

Buttons with icons and label

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Variant="Variant.Filled" EndIcon="@Icons.Material.Filled.ArrowDownward" Style="background-color: yellowgreen; color: white; width: 200px; height: 60px;">
    Download Now
</MudButton>

Link Button

Set the Link parameter and the MudButton will render an anchor element. If you also set the Target parameter to _blank, the component will add rel="noopener" automatically. If you set the Disabled parameter to true, the component will render a button with no href attribute.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Link="https://github.com/Garderoben/MudBlazor"
           Target="_blank"
           Variant="Variant.Filled"
           EndIcon="@Icons.Custom.Brands.GitHub"
           Color="Color.Primary"
           Disabled=@disabled>
    GitHub Link
</MudButton>
<MudButton Link="https://github.com/Garderoben/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/Garderoben/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;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙