Class SfFab

Represents the Blazor Floating Action Button (FAB), which is an extension of the SfButton component that floats above page content and enables quick access to the primary action.

Inheritance
System.Object
SfBaseComponent
SfButton
SfFab
Inherited Members
Namespace: Syncfusion.Blazor.Buttons
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfFab : SfButton
Remarks

The Floating Action Button (FAB) is positioned above all page content and is primarily used for the most frequent action on a page. This component supports various visual and positional customizations and can be integrated flexibly with other Syncfusion components.

Examples

A simple FAB with text content.

<SfFab Content="Click" />

FAB with icon.

<SfFab IconCss="e-icons e-search" />

FAB with icon and text.

<SfFab IconCss="e-icons e-search" Content="Search" />

FAB with info button style.

<SfFab CssClass="e-info" IconCss="e-icons e-search" />

Constructors

SfFab()

Declaration
public SfFab()

Properties

IsPrimary

Gets or sets a value that determines whether the primary style is applied to the Floating Action Button (FAB).

Declaration
public override bool IsPrimary { get; set; }
Property Value
Type Description
System.Boolean

true if the primary style is applied to the FAB component; otherwise, false. The default value is true.
Overrides
Remarks

Use this property to visually emphasize the main action by rendering the FAB in a primary style. The primary style is meant to highlight the most important action on the page.

Examples

Set a FAB as secondary style.

<SfFab IsPrimary="false" Content="Secondary" />

Position

Gets or sets the position of the FAB relative to its Target element or the viewport.

Declaration
public FabPosition Position { get; set; }
Property Value
Type Description
FabPosition

One of the FabPosition enumeration values that specifies the location of the FAB. The default value is BottomRight.
Remarks

Set this property to position the FAB at various locations within the target container or viewport. To manually refresh the FAB position after the Target is resized, use the RefreshPositionAsync() method. The FAB position will automatically update when the browser is resized.

Examples

Set the FAB to appear in the top right corner of its target container.

<SfFab Target="#myContainer" Position="FabPosition.TopRight" />

Target

Gets or sets the CSS selector that identifies an element on the page in which the FAB will be positioned.

Declaration
public string Target { get; set; }
Property Value
Type Description
System.String

A string value representing the selector of the target element. The default value is null, in which case the FAB is positioned relative to the browser viewport.
Remarks

The specified target element must have a CSS position of relative or absolute to ensure the FAB is positioned within it. If not, the FAB will be placed relative to the next closest ancestor with a relative position.

Examples

A simple FAB targeting a sibling element.

<div id="target_element" style="position:relative;"></div>
<SfFab Content="Click" Target="#target_element" />

Visible

Gets or sets a value indicating whether the FAB is visible.

Declaration
public bool Visible { get; set; }
Property Value
Type Description
System.Boolean

true if the FAB is visible; otherwise, false. The default value is true.
Remarks

Set this property to false to programmatically hide the Floating Action Button. When true, the FAB is rendered and visible on the page.

Examples

Hide the FAB conditionally.

<SfFab Visible="false" Content="Hidden FAB" />

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder
Overrides

OnInitializedAsync()

Asynchronously initializes state for the SfFab component, setting up element ID, position tracking, and required scripts.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
System.Threading.Tasks.Task

A task representing the asynchronous operation.
Overrides
Remarks

This method ensures the FAB is properly registered for use in Blazor component trees, including setup for client interop scripts and internal state for position/target.

OnParametersSetAsync()

Handles updated parameter values for the FAB when property bindings change, ensuring correct position and visibility.

Declaration
protected override Task OnParametersSetAsync()
Returns
Type Description
System.Threading.Tasks.Task

A task representing the asynchronous operation.
Overrides
Remarks

This lifecycle override keeps FAB UI in sync with component state, propagating property changes and revalidating required client-side configuration.

RefreshPositionAsync()

Refreshes the FAB's position. Call this method to recalculate and reapply the FAB's coordinates when its Target is resized or repositioned.

Declaration
public Task RefreshPositionAsync()
Returns
Type Description
System.Threading.Tasks.Task

A task representing the asynchronous repositioning operation.
Remarks

Use this after dynamic layout changes, or after updating the Target property, to guarantee visual accuracy for the FAB.