MudBlazor

Community Support

Discord

GitHub Discussions

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

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Floating action button

A floating action button (FAB).

See Floating action button API for parameter documentation.

Simple FAB

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudFab Color="Color.Primary" Icon="@Icons.Material.Filled.Add" aria-label="add" />
<MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Edit" aria-label="edit" />
<MudFab Color="Color.Tertiary" Icon="@Icons.Material.Filled.ShoppingCart" DisableElevation="true" aria-label="add to shopping cart" />
<MudFab Icon="@Icons.Material.Filled.Navigation" Label="Navigation" />
<MudFab Icon="@Icons.Material.Filled.Save" Disabled="true" aria-label="save" />

Size

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudContainer>
    <MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Add" Size="Size.Small" IconSize="Size.Small" Class="ma-2" />
    <MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Add" Size="Size.Small" IconSize="Size.Medium" Class="ma-2" />
    <MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Add" Size="Size.Small" IconSize="Size.Large" Class="ma-2" />
    <MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Add" Size="Size.Medium" IconSize="Size.Small" Class="ma-2" />
    <MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Add" Size="Size.Medium" IconSize="Size.Medium" Class="ma-2" />
    <MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Add" Size="Size.Medium" IconSize="Size.Large" Class="ma-2" />
    <MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Add" Size="Size.Large" IconSize="Size.Small" Class="ma-2" />
    <MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Add" Size="Size.Large" IconSize="Size.Medium" Class="ma-2" />
    <MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Add" Size="Size.Large" IconSize="Size.Large" Class="ma-2" />
</MudContainer>
<MudContainer>
    <MudFab Color="Color.Primary" Icon="@Icons.Material.Filled.ShoppingCart" Size="Size.Small" IconSize="Size.Small" Label="To cart" Class="ma-2" />
    <MudFab Color="Color.Primary" Icon="@Icons.Material.Filled.ShoppingCart" Size="Size.Medium" IconSize="Size.Medium" Label="To cart" Class="ma-2" />
    <MudFab Color="Color.Primary" Icon="@Icons.Material.Filled.ShoppingCart" Size="Size.Large" IconSize="Size.Large" Label="To cart" Class="ma-2" />
</MudContainer>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙