ASP.NET MVC FloatingActionButton Overview

The FloatingActionButton is part of Telerik UI for ASP.NET MVC, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

The Telerik UI FloatingActionButton HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI FloatingActionButton widget.

The FloatingActionButton is a UI component that is tied to the most logical action that we expect from a user looking at a particular screen. For example, the most logical action for a user looking at the main screen of a mobile messaging app is to write a message. You can implement a FloatingActionButton that allows the user to compose a new message.

The FloatingActionButton floats in the application above other items, and its main action directly corresponds to the content on the screen. Apart from being a single button with a single action, the FloatingActionButton can also be configured to display additional related actions or speed dial actions.

• Demo page for the FloatingActionButton HtmlHelper

Initializing the FloatingActionButton

The following example demonstrates how to initialize the FloatingActionButton, configure its items, and set its position.

    @(Html.Kendo().FloatingActionButton()
        .Name("fab")
        .ThemeColor(FloatingActionButtonThemeColor.Primary)
        .Align(FloatingActionButtonAlign.BottomEnd)
        .AlignOffset(ao=>ao.Horizontal(50).Vertical(50))
        .PositionMode(FloatingActionButtonPositionMode.Absolute)
        .Size(FloatingActionButtonSize.Medium)
        .Shape(FloatingActionButtonShape.Pill)
        .Icon("share")
        .Items(items=>{
            items.Add().Icon("download").Label("Download").Click(onItemClick);
            items.Add().Icon("print").Label("Print").Click(onItemClick);
            items.Add().Icon("envelop").Label("Email").Click(onItemClick);
        })
    )

    <script type="text/javascript">
        $(function () {
            // The Name() of the FloatingActionButton is used to get its client-side instance.
            var fab = $("#fab").data("kendoFloatingActionButton");
            console.log(fab);
        });

        function onItemClick(e){
            // Handle the action item click event.
        }
    </script>

Functionality and Features

• Alignment—The FloatingActionButton provides options that allow you to manipulate the position of the component.
• Appearance—You can set the size, color, icon, and text of the FloatingActionButton by using the built-in appearance options.
• Templates—The item templates allow you to control the rendering of the items in the FloatingActionButton popup.
• Accessibility—The FloatingActionButton is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
• Events—The FloatingActionButton emits Click(), Expand(), and Collapse() events that you can use to trigger specific actions.

Next Steps

• Getting Started with the FloatingActionButton
• Basic Usage of the FloatingActionButton HtmlHelper for ASP.NET MVC (Demo)

See Also

• Using the API of the FloatingActionButton for ASP.NET MVC (Demo)
• Knowledge Base Section