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" />
<MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Edit" />
<MudFab Color="Color.Tertiary" Icon="@Icons.Material.Filled.ShoppingCart" DisableElevation="true" />
<MudFab Icon="@Icons.Material.Filled.Navigation" Label="Navigation" />
<MudFab Icon="@Icons.Material.Filled.Save" Disabled="true" />

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 🗙