# FloatingActionButton Customization

The FloatingActionButton provides options for customizing the behavior of its popup and the rendering of its popup items.

The component enables you to:

* [Configure popup behavior](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/customization#popup-behavior)
* [Customize popup item content](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/customization#item-templates)

## Popup Behavior

The FloatingActionButton allows you to configure its popup through the [`popupSettings`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#popupSettings) property. You can control the popup animation with [`animate`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonpopupsettings#animate), or add a CSS class for styling the popup with [`popupClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonpopupsettings#popupClass).

The following demo shows how to configure popup animation and add a CSS class to the popup.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/items/custom/popup/source.txt)

## Item Templates

To replace the default content of all popup items, use the [`item`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#item) slot. The slot receives the item props, including the item data as `dataItem` and its position as `index`, and Kendo UI for Vue renders the slot content in place of the generated list item.

The following demo renders custom contact details inside each popup item.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/items/custom/custom-rendering/source.txt)

## Suggested Links

* [API Reference of the FloatingActionButtonProps](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops)
* [API Reference of the FloatingActionButtonItemProps](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonitemprops)