Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

ComponentsActions

Floating action button and FAB menu

A floating action button (FAB) carries the single most important action of a screen; a FAB menu fans out a few related actions from it. Use at most one per view, and prefer an ordinary button when the action is not the obvious next step.

Round and extended

A round FAB shows only an icon and needs an aria-label. Label turns it into an extended FAB, which is clearer when there is room.

Every variant and color

All 36 combinations of Variant and Color. Filled is the default and the most prominent.

MudFab: Variant × Color
Variant ↓ · Color →DefaultPrimarySecondaryTertiaryInfoSuccessWarningErrorDarkTransparentInheritSurface
Text
Filled
Outlined

Sizes

Large is the default. Small FABs suit dense lists and secondary surfaces.

Small
Medium
Large

FAB menu directions

Direction decides where the items fan out; AlignItems lines labelled items up against the main button. Extra attributes on MudFabMenu land on its container, not its button, so name the button with Label and each icon-only item with an aria-label.

Direction

AlignItems

Last choice: none

Scenario: order screen

A FAB menu anchored to the corner of a panel. Each item has a visible label, and the panel reserves room so the open menu never covers the last row.

Rye & Crumb · Today's orders

Counter sale: 1 seeded loaf

Phone order: birthday cake, collect 16:00

FAB menu behaviour

Click-only opening, staying open after a choice, keeping the main icon and full-strength item colors, all against the defaults.

Defaults: opens on hover or click, close icon, dampened items
Click to open, stays open, keeps its icon · 0 applied

States and links

Disabled, without shadow, rendered as a link, and busy while asynchronous work runs.

Open the button page

Playground

Change any parameter; the markup below updates with only the values that differ from the defaults.

Label
Variant
Color
Size
<MudFab
    Color="Color.Primary"
    StartIcon="@Icons.Material.Outlined.Add"
    Label="New booking" />

Starting .NET in your browser…