# Appearance

The FloatingToolBar for ASP.NET Core provides options for controlling the styling of the hosted ToolBar and its tools.

## Options

The FloatingToolBar supports the following styling options:

* [`Size()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/appearance#size)—Configures the overall size of the toolbar and its tools.
* [`FillMode()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/appearance#fill-mode)—Configures how the color is applied to the toolbar and its tools.

## Size

The `Size()` option controls the size of the hosted ToolBar and its tools. It accepts the following `ComponentSize` values:

* `Small`
* `Medium` (default)
* `Large`

```Razor HtmlHelper
    @(Html.Kendo().FloatingToolBar()
        .Name("floatingtoolbar")
        .Visible(true)
        .Size(ComponentSize.Large)
        .Items(items =>
        {
            items.Add().Type(CommandType.Button).Text("Print").Icon("print");
            items.Add().Type(CommandType.Button).Text("Download").Icon("download");
        })
    )
```

```Razor TagHelper
    <kendo-floatingtoolbar name="floatingtoolbar" visible="true" size="ComponentSize.Large">
        <floatingtoolbar-items>
            <item type="CommandType.Button" text="Print" icon="print" />
            <item type="CommandType.Button" text="Download" icon="download" />
        </floatingtoolbar-items>
    </kendo-floatingtoolbar>
```

## Fill Mode

The `FillMode()` option controls how the color is applied to the toolbar and its tools. It accepts the following `FillMode` values:

* `Solid` (default)
* `Flat`
* `Outline`

```Razor HtmlHelper
    @(Html.Kendo().FloatingToolBar()
        .Name("floatingtoolbar")
        .Visible(true)
        .FillMode(FillMode.Flat)
        .Items(items =>
        {
            items.Add().Type(CommandType.Button).Text("Print").Icon("print");
            items.Add().Type(CommandType.Button).Text("Download").Icon("download");
        })
    )
```

```Razor TagHelper
    <kendo-floatingtoolbar name="floatingtoolbar" visible="true" fill-mode="FillMode.Flat">
        <floatingtoolbar-items>
            <item type="CommandType.Button" text="Print" icon="print" />
            <item type="CommandType.Button" text="Download" icon="download" />
        </floatingtoolbar-items>
    </kendo-floatingtoolbar>
```

## Next Steps

* [Configuring the Overflow of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/overflow)
* [Handling the FloatingToolBar Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/events)
* [Accessibility of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/overview)
* [Keyboard Navigation of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/keyboard-navigation)

## See Also

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