---
title: Usage
position: 2
seo_title: Guidelines for Using the FloatingActionButton Component
seo_description: Get the knack of the Telerik and Kendo UI FloatingActionButton
  and learn how to use the fill modes, label text and width, sizing, and
  alignment options of the component by following the instructions and
  recommendations in the user guidelines created by our designers.
---
## Usage Guidelines

The Telerik and Kendo UI FloatingActionButton requires you to follow some basic principles when using the component.

### Importance

The FloatingActionButton immediately draws the user’s attention. That’s why using it sparingly and wisely is recommended. To allow the user quick access to multiple related actions, use speed dial items.

<DosDonts>
<Do description="Use a FloatingActionButton for actions of primary importance and speed dial items to represent any related actions.">![A Telerik and Kendo UI FloatingActionButton with multiple events.](images/components-fab-usage-importance-do.png "Render a Telerik and Kendo UI FloatingActionButton with multiple items in different colors to imply different levels of importance.")</Do>
<Dont description="Avoid using more than one FloatingActionButton on a single page.">![Three Telerik and Kendo UI FloatingActionButton with the same fill mode and color in a container.](images/components-fab-usage-importance-dont.png "Do not render Telerik and Kendo UI FloatingActionButton with the same fill mode and color if they imply different levels of importance.")</Dont>
</DosDonts>


### Placement

The FloatingActionButton provides built-in options that allow you to modify the position of the component. To find an optimal place for it, consider the content and the page layout. The FloatingActionButton is usually situated at the bottom of the page, the corners, or the center in a way that does not affect the visibility of the content.

<DosDonts>
<Do description="Use the positioning options of the FloatingActionButton by considering the content and the page layout.">![A Telerik and Kendo UI FloatingActionButton that respects the content layout.](images/components-fab-usage-placement-do.png "Place the FloatingActionButton acording to the content layout.")</Do>
<Dont description="Avoid hiding the content with the FloatingActionButton.">![A Telerik and Kendo UI FloatingActionButton improperly positioned with respect to the content layout.](images/components-fab-usage-placement-dont.png "Do not place the Telerik and Kendo UI FloatingActionButton in a manner that hides the content and affects the visibility.")</Dont>
</DosDonts>


### Elevation

As the FloatingActionButton indicates the primary or the most common action on the page, it must have a greater z-index than any other element on the page.

<DosDonts>
<Do description="Set a greater z-index to the FloatingActionButton to indicate its higher importance.">![A Telerik and Kendo UI FloatingActionButton with a greater z-index than any other element in the container.](images/components-fab-usage-elevation-do.png "Use a greater z-index for Telerik and Kendo UI FloatingActionButton to highlight its importance on the page.")</Do>
<Dont description="Avoid diminishing the importance of the FloatingActionButton by setting the same or even higher z-index to another element on the page.">![A Telerik and Kendo UI FloatingActionButton using the same z-index as another element in the same container.](images/components-fab-usage-elevation-dont.png "Do not set the same or greater z-index to another element as it diminishes the importance of the Telerik and Kendo UI FloatingActionButton on the page.")</Dont>
</DosDonts>