SplitButton

Usage Guidelines

The Telerik and Kendo UI SplitButton requires you to follow some basic principles when using the component.

Grouping

The purpose of a split button is to save space and reduce visual complexity by grouping similar commands together. 

DoLogically group actions or commands with similar meaning.

Don'tAvoid grouping actions and commands which are mutually exclusive or have nothing in common.

Content

The label of the SplitButton must be as short and concise as possible. If the content cannot be displayed within the button itself, present it by using a proper icon that conveys its meaning.

While icons can fully replace the label of the SplitButton, in the list items of the drop-down menu they must be accompanied by the corresponding text.

DoTo save space, use comprehensible icons and no text for the label of the SplitButton. However, within the drop-down menu, include the corresponding icon labels.

Don'tAvoid using icon-only list items within the drop-down menu of the SplitButton as they need to be accompanied by corresponding text to ensure that the action or command are clear.

Hierarchy

The SplitButton comes with an established hierarchy as it contains a drop-down menu where all listed options are of equal importance.

If a list item requires you to implement subitems, consider creating a new SplitButton with the list of subitems from the current SplitButton. If this approach is not feasible, use separators to enhance the distinction.

DoSeparate the groups within the drop-down menu if it is not possible to transfer them to a new SplitButton.

Don'tAvoid using submenu items as they take too much horizontal space and are hard to navigate with a mouse.