MudBlazor

Floating action button

A floating action button (FAB).

Simple FAB

<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

<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 🗙