# Appearance

In this article, you will find information about the styling options and rendering of the Telerik UI for ASP.NET Core FloatingActionButton.

For a complete example, refer to the [Appearance Demo of the FloatingActionButton](https://demos.telerik.com/aspnet-core/floatingactionbutton/appearance).

## Options

The FloatingActionButton component provides the following options for styling:

* [`Size()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingactionbutton/appearance#size)—Configures the size of the component.
* [`FillMode()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingactionbutton/appearance#fillmode)—Defines how the color is applied to the button.
* [`ThemeColor()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingactionbutton/appearance#themecolor)—Sets the color applied to the component.
* [`Rounded()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingactionbutton/appearance#rounded)—Determines the border radius of the component.

### Size

To control the size of the FloatingActionButton, configure the `Size` option with any of the following values:

* `Small`
* `Medium` (the default size)
* `Large`
* `None`

```Razor HtmlHelper
    @(Html.Kendo().FloatingActionButton()
        .Name("fab")
        .Size(FloatingActionButtonSize.Large)
        .Icon("home")
        .Text("Home")
    )
```

```Razor TagHelper
    <kendo-floatingactionbutton name="fab"
        size="FloatingActionButtonSize.Large"
        icon="home"
        text="Home">
    </kendo-floatingactionbutton>
```

### FillMode

The `FillMode()` method specifies how the color is applied to the component. The default fill mode of the FloatingActionButton is `Solid`.

```Razor HtmlHelper
    @(Html.Kendo().FloatingActionButton()
        .Name("fab")
        .FillMode(FloatingActionButtonFillMode.Solid)
        .Icon("home")
        .Text("Home")
    )
```

```Razor TagHelper
    <kendo-floatingactionbutton name="fab"
        fill-mode="FloatingActionButtonFillMode.Solid"
        icon="home"
        text="Home">
    </kendo-floatingactionbutton>
```

### ThemeColor

The `ThemeColor` configuration provides a variety of colors that can be applied to the component. The available options are:

* `Base`
* `Primary`
* `Secondary`
* `Tertiary`

The default `ThemeColor` is `Primary`.

```Razor HtmlHelper
    @(Html.Kendo().FloatingActionButton()
        .Name("fab")
        .ThemeColor(FloatingActionButtonThemeColor.Secondary)
        .Icon("home")
        .Text("Home")
    )
```

```Razor TagHelper
    <kendo-floatingactionbutton name="fab"
        theme-color="FloatingActionButtonThemeColor.Secondary"
        icon="home"
        text="Home">
    </kendo-floatingactionbutton>
```

### Rounded

The border radius of the FloatingActionButton can be customized through the `Rounded()` method. The default option is `Full`.

```Razor HtmlHelper
    @(Html.Kendo().FloatingActionButton()
        .Name("fab")
        .Rounded(FloatingActionButtonRounded.Large)
        .Icon("home")
        .Text("Home")
    )
```

```Razor TagHelper
    <kendo-floatingactionbutton name="fab"
        rounded="FloatingActionButtonRounded.Large"
        icon="home"
        text="Home">
    </kendo-floatingactionbutton>
```

The following values are available for the `Rounded` option:

* `Small`
* `Medium`
* `Large`
* `Full`
* `None`

## Rendering

Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the [Components Rendering Overview](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/components-rendering-overview) article.

To review the latest rendering of the component, refer to the HTML specifications in the [Kendo UI Themes Monorepo](https://github.com/telerik/kendo-themes/tree/develop). The `tests` folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.

## Best Practices

The Material Design guidelines dictate that:

* When you configure the FloatingActionButton to display additional related actions (speed dial actions), you must 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 FloatingActionButton, consider omitting the additional actions.

```Razor HtmlHelper
    @(Html.Kendo().FloatingActionButton()
        .Name("fab")
        .Icon("plus")
        .Text("Add To Cart")
    )
```

```Razor TagHelper
    <kendo-floatingactionbutton name="fab"
        icon="plus"
        text="Add To Cart">
    </kendo-floatingactionbutton>
```

## Icons

The `Icon()` configuration option accepts a name of an icon. The specified icon must be available in the used Kendo UI theme. For more details on the available icons, refer to the [Web Components Icons font](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/).

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

```Razor TagHelper
    <kendo-floatingactionbutton name="fab" icon="plus">
        <floatingactionbutton-items>
            <floatingactionbutton-item label="Add Rating" icon="star"></floatingactionbutton-item>
            <floatingactionbutton-item label="Add Comment" icon="edit"></floatingactionbutton-item>
        </floatingactionbutton-items>
    </kendo-floatingactionbutton>
```

## See Also

* [Components Appearance Overview](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/components-rendering-overview)

* [Appearance of the FloatingActionButton HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/floatingactionbutton/appearance)

* [Server-Side HtmlHelper API](https://www.telerik.com/aspnet-core-ui/documentation/api/floatingactionbutton)

* [Server-Side TagHelper API](https://www.telerik.com/aspnet-core-ui/documentation/api/taghelpers/floatingactionbutton)

* [Client-Side API](https://docs.telerik.com/kendo-ui/api/ui/floatingactionbutton)