Blazor Floating Action Button Example - Default Functionalities

Loading Syncfusion Blazor Server Demos…

This sample demonstrates the default functionality of the Floating Action Button (FAB) component and common configuration patterns. The FAB is a prominent, elevated control that floats above application content to expose a primary action for the current view; this example illustrates typical variants and the SfButton properties used to implement them.

The sample presents four representative FAB variations and shows how to reproduce each using core button properties:

Icon-only FAB: Displays only an icon by setting the IconCss property, producing a compact action control suitable for well-known glyphs.
Icon with label FAB: Combines an icon and text content to improve discoverability and clarify the action intent for broader audiences.
Disabled FAB: Demonstrates the disabled state using the Disabled property to prevent interaction when the primary action is unavailable.
Label-only FAB: Renders text-only content for contexts where an icon is unnecessary or a descriptive label is preferred.

Use the CssClass property to apply positioning and visual theming (for example, placement, elevation, or spacing) and the Content property to define the button’s textual or HTML content.

The example is intended as a concise reference: replicate the shown variants, adapt CssClass for layout placement, and bind the FAB action to application commands so the control remains focused, accessible, and reusable across views.