New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Appearance

The Telerik UI FloatingActionButton HtmlHelper for ASP.NET MVC allows you to customize the appearance of the component by setting its the size, shape, color, icon and text.

Best Practices

The Material Design guidelines dictate that:

  • When you configure the FloatingActionButton to display additional related actions (speed dial actions), you should configure only an icon for the button, without a label. Use labels to display additional information for the related actions.

  • If the application requires an icon and a label for the Kendo UI FloatingActionButton, consider omitting the additional actions.

    @(Html.Kendo().FloatingActionButton()
        .Name("fab")
        .Icon("plus")
        .Text("Add To Cart")
    )
    </script>

Icons

The Icon configuration option specifies the name of an icon. The selected icon must be available in the Kendo UI theme that is rendered by the FloatingActionButton. For more details on the available Web Font icons, see the Web Font Icons article.

    @(Html.Kendo().FloatingActionButton()
        .Name("fab")
        .Icon("plus")
        .Items(items=>{
            items.Add().Icon("star").Label("Add Rating");
            items.Add().Icon("edit").Label("Add comment");
        })
    )

See Also

In this article
Not finding the help you need? Improve this article