Blazor Floating Action Button Overview

The Blazor Floating Action Button is a UI component that shows over the other page content and may not move during scrolling. The component can perform the most logical action expected from a user looking at a particular screen. You can configure the FloatingActionButton to display:

• A single button with a single action
• Additional related actions
• Speed dial actions

The Floating Action Button comes with built-in customization features that lets you fine-tune the positioning and alignment of the component, customize its appearance, use icons, and attach click events.

Creating Blazor Floating Action Button

1. Use the <TelerikFloatingActionButton> tag to add the component to your razor page.
2. (optional) Customize the appearance of the Telerik Blazor Floating Action Button.

Basic Blazor Floating Action Button

Current time: @Result
<TelerikFloatingActionButton Size="@ThemeConstants.Button.Size.Large"
                             VerticalAlign="@FloatingActionButtonVerticalAlign.Top"
                             HorizontalAlign="@FloatingActionButtonHorizontalAlign.Center"
                             ThemeColor="@ThemeConstants.Button.ThemeColor.Info"
                             Icon="@SvgIcon.Clock"
                             OnClick="@HandleClickEvent" />
@code {
    private string Result { get; set; } = DateTime.Now.ToString("HH:MM:ss:fff");

    private void HandleClickEvent()
    {
        Result = DateTime.Now.ToString("HH:MM:ss:fff");
    }
}

Position and Alignment

You can control how the Floating Action Button is positioned relative to its associated container. Read more about the Blazor Floating Action Button positioning...

Events

The Blazor Floating Action Button fires events that you can handle and respond to user actions. Read more about the Blazor Floating Action Button events....

Floating Action Button Parameters

The Blazor Floating Action Button provides various parameters that allow you to configure the component. Also check the Floating Action Button public API.

Parameter	Type and Default Value	Description
Enabled	bool (true)	Whether the Floating Action Button is enabled.
Id	string	The id attribute of the Floating Action Button.
Icon	object	The icon rendered in the Floating Action Button. Can be set to a predefined Telerik icon or a custom one.
Title	string	The title attribute of the Floating Action Button.
PositionMode	FloatingActionButtonPositionMode enum (Fixed)	The position of the Floating Action Button relative to the container.
HorizontalAlign	FloatingActionButtonHorizontalAlign (End)	Determines if the left or the right side of the Floating Action Button will touch its parent container. Read more about Floating Action Button positioning.
VerticalAlign	FloatingActionButtonVerticalAlign (Bottom)	Determines if the Floating Action Button will touch the parent container with its top or bottom side.
HorizontalOffset	string (16px)	The horizontal offset value added to the button position, creating a blank space between the button and the parent.
VerticalOffset	string (16px)	The vertical offset value added to the button position, creating a blank space between the button and the parent.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor Floating Action Button:

Parameter	Type	Description
Class	string	Defines the custom CSS class rendered on <button class="k-fab">, which is the main wrapping element of the Floating Action Button component. Use it for styling customizations.
Rounded	string "full"	Defines how rounded the borders of the Floating Action Button are. Use predefined value constants from the static class Telerik.Blazor.ThemeConstants.Button.Rounded.
Size	string ("md")	Sets the size of the Floating Action Button. Set it to a predefined value constant from the static class Telerik.Blazor.ThemeConstants.Button.Size.
ThemeColor	string ("primary")	Adjusts the background color of the Floating Action Button. Use predefined values from the static class Telerik.Blazor.ThemeConstants.Button.ThemeColor.

Next Steps

• Explore the Floating Action Button Positioning and Alignment Settings
• Customize the Floating Action Button Appearance

See Also

• Live Demo: Floating Action Button
• Floating Action Button Events
• Floating Action Button API Reference