Fab: Blazor fab component

Examples

Speed dial

FabAction children appear above the trigger with optional tooltips and their own OnClick.

Click the + button to open the speed dial.

website/Examples/Actions/FabSpeedDialExample.razor Source

Flower

Flower="true" fans up to five actions out in a quarter circle.

website/Examples/Actions/FabFlowerExample.razor Source

Custom icon, no close

Icon swaps the trigger glyph; ShowClose="false" keeps the trigger instead of the close button while open.

website/Examples/Actions/FabCustomExample.razor Source

API

<Fab>

DaisyBlazor

Parameters

AriaLabel string
= null
Accessible name for the FAB trigger button. The trigger is icon-only, so set this to describe the action it opens (e.g. "Actions"). When null no aria-label is emitted.
CloseAriaLabel string
= null
Tooltip (title) of the pointer-only close overlay control. Null uses the app-wide Strings.
Color Color
= Color.Primary
Semantic color applied to the trigger button.
Fixed bool
= true
When true (default) the fab is fixed to the viewport corner (daisyUI .fab). When false it is positioned absolute, in the corner of its nearest positioned ancestor (give the container relative), e.g. to keep it inside a card or demo box.
Flower bool
= false
When true the items spread in a flower/radial pattern (.fab-flower). When false (default) they stack in a vertical list.
Icon string
= null
Material Symbols ligature for the trigger icon. Defaults to "add".
ShowClose bool
= true
When true a .fab-close layer is rendered so the user can click the trigger again (or anywhere outside) to collapse the speed dial.
Class string
= null
Extra CSS classes added to the fab root.
Style string
= null
Inline CSS style applied to the fab root.

Name	Type	Default	Description
AriaLabel	string	null	Accessible name for the FAB trigger button. The trigger is icon-only, so set this to describe the action it opens (e.g. "Actions"). When null no aria-label is emitted.
CloseAriaLabel	string	null	Tooltip (title) of the pointer-only close overlay control. Null uses the app-wide Strings.
Color	Color	Color.Primary	Semantic color applied to the trigger button.
Fixed	bool	true	When true (default) the fab is fixed to the viewport corner (daisyUI .fab). When false it is positioned absolute, in the corner of its nearest positioned ancestor (give the container relative), e.g. to keep it inside a card or demo box.
Flower	bool	false	When true the items spread in a flower/radial pattern (.fab-flower). When false (default) they stack in a vertical list.
Icon	string	null	Material Symbols ligature for the trigger icon. Defaults to "add".
ShowClose	bool	true	When true a .fab-close layer is rendered so the user can click the trigger again (or anywhere outside) to collapse the speed dial.
Class	string	null	Extra CSS classes added to the fab root.
Style	string	null	Inline CSS style applied to the fab root.

Content

ChildContent RenderFragment
Speed-dial action items (typically <FabAction> elements or plain daisyUI buttons).

Name	Type	Description
ChildContent	RenderFragment	Speed-dial action items (typically <FabAction> elements or plain daisyUI buttons).

<FabAction>

DaisyBlazor

Parameters

AriaLabel string
= null
Accessible name of the icon-only button. Defaults to Tooltip.
Color Color
= Color.Default
Semantic color applied to the action button.
Icon string
= null
Material Symbols ligature shown inside the action button.
Tooltip string
= null
Optional tooltip text displayed next to the button.
TooltipPosition string
= "left"
Tooltip placement relative to the button (left / right / top / bottom).
Class string
= null
Extra CSS classes merged onto the action button itself (like Style and extra attributes).
Style string
= null
Inline styles applied to the action button itself.

Name	Type	Default	Description
AriaLabel	string	null	Accessible name of the icon-only button. Defaults to Tooltip.
Color	Color	Color.Default	Semantic color applied to the action button.
Icon	string	null	Material Symbols ligature shown inside the action button.
Tooltip	string	null	Optional tooltip text displayed next to the button.
TooltipPosition	string	"left"	Tooltip placement relative to the button (left / right / top / bottom).
Class	string	null	Extra CSS classes merged onto the action button itself (like Style and extra attributes).
Style	string	null	Inline styles applied to the action button itself.

Events

OnClick EventCallback<MouseEventArgs>
Click callback.

Name	Type	Description
OnClick	EventCallback<MouseEventArgs>	Click callback.

Content

ChildContent RenderFragment
Arbitrary child content (replaces the auto-rendered Icon when set).

Name	Type	Description
ChildContent	RenderFragment	Arbitrary child content (replaces the auto-rendered Icon when set).

From MudFab

Fab keeps MudFab's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.

MudFab is a single button; Fab is daisyUI's fixed-position speed dial. For a lone round action inside the layout, use IconButton or a Button with Class="btn-circle".