Spacer

Updated on Dec 10, 2025

The Spacer command type moves the tools that are declared after it to the right side of the ToolBar.

The following example demonstrates how to define a spacer.

html

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            { type: "button", text: "Button 1" },
            { type: "spacer" },
            { type: "button", text: "Button 2" }
        ]
    });
</script>

You can use multiple spacers to create an equal amount of space between several tools.

html

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            { type: "button", text: "Button 1" },
            { type: "spacer" },
            { type: "button", text: "Button 2" },
            { type: "spacer" },
            { type: "button", text: "Button 3" }
        ]
    });
</script>

See Also

• Basic Usage of the ToolBar (Demo)
• JavaScript API Reference of the ToolBar