Appearance

Updated on Oct 9, 2026

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
• Events of the FloatingToolBar
• Keyboard Navigation of the FloatingToolBar
• Accessibility of the FloatingToolBar

See Also

• Accessibility