# FloatingActionButton

## Example

```
<kendo-floatingactionbutton>
    <floatingactionbutton-items></floatingactionbutton-items>
    <icon />
</kendo-floatingactionbutton>
```

## ChildTags

| Tag Name                   | Details                                                                                                                                                              |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| floatingactionbutton-items | [FloatingActionButtonItemsTagHelper](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.taghelpers/floatingactionbuttonitemstaghelper)               |
| icon                       | [FloatingActionButtonIconSettingsTagHelper](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.taghelpers/floatingactionbuttoniconsettingstaghelper) |

## Attributes

| Attribute               | Type                                                                                                                                       | Description                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name                    | String                                                                                                                                     | Sets the name of the component.                                                                                                                                                                                                                                                                                                                                               |
| align-offset-horizontal | String                                                                                                                                     | Specifies the initial horizontal offset of the FloatingActionButton. Numeric values are treated as pixels. String values can specify pixels, percentages, ems, or other valid values.                                                                                                                                                                                         |
| align-offset-vertical   | String                                                                                                                                     | Specifies the initial vertical offset of the FloatingActionButton. Numeric values are treated as pixels. String values can specify pixels, percentages, ems or other valid values.                                                                                                                                                                                            |
| is-in-client-template   | Boolean                                                                                                                                    | When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.                                                                                                                                                                                                                                              |
| align                   | [FloatingActionButtonAlign](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui/floatingactionbuttonalign)               | Specifies the initial horizontal offset of the FloatingActionButton. Numeric values are treated as pixels. String values can specify pixels, percentages, ems, or other valid values.                                                                                                                                                                                         |
| deferred                | Boolean                                                                                                                                    | Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.                                                                                                                                                                                                                                                   |
| as-module               | Boolean                                                                                                                                    | Specifies whether the initialization script of the component will be rendered as a JavaScript module.                                                                                                                                                                                                                                                                         |
| enabled                 | Boolean                                                                                                                                    | Specifies whether the FloatingActionButton is enabled (true) or disabled (false).                                                                                                                                                                                                                                                                                             |
| fill-mode               | [FloatingActionButtonFillMode](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui/floatingactionbuttonfillmode)         | Sets a value controlling how the color is applied.                                                                                                                                                                                                                                                                                                                            |
| icon                    | String                                                                                                                                     | Specifies the name for an existing icon in a Kendo UI theme that is rendered in the FloatingActionButton.See the Web Font Icons help article for more details on Kendo UI icons.Set this option to an icon descriptor such as { name: "gear", variant: "outline" }. The variant can be outline, solid, or duotone; it applies to SVG rendering and is ignored for font icons. |
| on-click                | String                                                                                                                                     | The name of the JavaScript function that will handle the click event. Fires when the user clicks on a the FloatingActionButton.\*\*Note: when using items configuration, clicking on the FloatingActionButton will open the speed-dial list popup.                                                                                                                            |
| on-collapse             | String                                                                                                                                     | The name of the JavaScript function that will handle the collapse event. Fires when the speed-dial popup is closed and its animation is finished.\*\*Note: this event is triggered only when using items configuration.                                                                                                                                                       |
| on-expand               | String                                                                                                                                     | The name of the JavaScript function that will handle the expand event. Fires when the speed-dial popup is opened and its animation is finished.\*\*Note: this event is triggered only when using items configuration.                                                                                                                                                         |
| on-kendo-keydown        | String                                                                                                                                     | The name of the JavaScript function that will handle the kendoKeydown event. Triggered when the user presses a keyboard key while the FloatingActionButton is focused.The event handler function context (available via the this keyword) will be set to the widget instance.                                                                                                 |
| position-mode           | [FloatingActionButtonPositionMode](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui/floatingactionbuttonpositionmode) | Defines the position of the component                                                                                                                                                                                                                                                                                                                                         |
| rounded                 | [FloatingActionButtonRounded](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui/floatingactionbuttonrounded)           | Sets a value controlling the border radius.                                                                                                                                                                                                                                                                                                                                   |
| script-attributes       | IDictionary\<String,Object>                                                                                                                | Sets the attributes that will be added to the script tag of the component's initialization script.                                                                                                                                                                                                                                                                            |
| size                    | [FloatingActionButtonSize](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui/floatingactionbuttonsize)                 | Defines the size of the component                                                                                                                                                                                                                                                                                                                                             |
| text                    | String                                                                                                                                     | Specifies the text of the FloatingActionButton. Default is empty string.                                                                                                                                                                                                                                                                                                      |
| theme-color             | [FloatingActionButtonThemeColor](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui/floatingactionbuttonthemecolor)     | Defines the theme color of the component                                                                                                                                                                                                                                                                                                                                      |
| visible                 | Boolean                                                                                                                                    | Specifies if the FloatingActionButton is visible initially.                                                                                                                                                                                                                                                                                                                   |