# Appearance

The FloatingToolBar forwards its `size` and `fillMode` options to the hosted ToolBar and its items.

## Size

Set `size` to `small`, `medium`, or `large`. When omitted, the active theme resolves the size to `medium`.

## Fill Mode

Set `fillMode` to `solid`, `outline`, or `flat`. When omitted, the active theme resolves the fill mode to `solid`.

```html
<div id="floatingtoolbar"></div>

<script>
    $("#floatingtoolbar").kendoFloatingToolBar({
        visible: true,
        size: "large",
        fillMode: "outline",
        items: [
            { type: "button", text: "Bold", icon: "bold", togglable: true },
            { type: "button", text: "Italic", icon: "italic", togglable: true }
        ]
    });
</script>
```

## Accessible Name

Use `ariaLabel` to set the accessible name on the hosted ToolBar. Provide a name that describes the commands, such as `Text formatting` or `Call controls`.

```js
$("#floatingtoolbar").kendoFloatingToolBar({
    ariaLabel: "Shipment actions",
    items: [{ type: "button", text: "Track", icon: "map-marker-target" }]
});
```

## Next Steps

* [Overflow in the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/overflow)
* [Events of the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/events)
* [Keyboard Navigation of the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/accessibility/keyboard-navigation)
* [Accessibility of the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/accessibility/overview)

## See Also

* [Accessibility](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/accessibility/overview)