FloatingToolbar

FloatingToolbar Overview

A FloatingToolbar is a user interface (UI) element that renders a ToolBar in a floating layer above the page content. It usually appears near the selected content, for example, selected text in an editor, and provides quick access to formatting or context-specific actions.

Live Demo

Appearance

The Telerik and Kendo UI FloatingToolbar is a composite component that wraps the ToolBar and its items, such as buttons, button groups, split buttons, menu buttons, and color pickers, in a popup.

Anatomy

The anatomy of the FloatingToolbar summarizes the elements of the component:

• Container—The floating popup that wraps the ToolBar and is elevated above the page content.
• Drag handle (optional)—A permanently visible handle on the start of the FloatingToolbar that lets users reposition it. The handle stays outside the scrollable area of the ToolBar, so it is never hidden in the overflow.
• Items—The buttons and other actions that the ToolBar renders.
• Separators (optional)—Visually group the related items.

Size

The FloatingToolbar provides the size configuration option that enables you to control how big or small the rendered FloatingToolbar will be.

size provides the following available options:

• small—Renders a small FloatingToolbar. Small FloatingToolbars are suitable when the available space is limited.
• medium (default)—Renders a medium FloatingToolbar.
• large—Renders a large FloatingToolbar, which is suitable for adaptive components and mobile devices.
• null—Removes the styling related to the size option. Not setting a size allows you to add your own, custom value.

Fill Mode

The FloatingToolbar provides the fillMode configuration option that enables you to control how the items in the FloatingToolbar are filled.

fillMode provides the following available options:

• solid—Renders the buttons in the FloatingToolbar with a solid fill.
• outline—Renders the buttons in the FloatingToolbar with an outline.
• flat—Renders the buttons in the FloatingToolbar without a background and border.
• null—Removes the styling related to the fillMode option. Not setting a fillMode allows you to add your own, custom value.

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular FloatingToolbarFind more information about the Kendo UI for Angular FloatingToolbar in the official product documentation of the component.

Telerik UI for Blazor FloatingToolbarFind more information about the Telerik UI for Blazor FloatingToolbar in the official product documentation of the component.

Kendo UI for jQuery FloatingToolbarFind more information about the Kendo UI for jQuery FloatingToolbar in the official product documentation of the component.

KendoReact FloatingToolbarFind more information about the KendoReact FloatingToolbar in the official product documentation of the component.