---
path: components/splitbutton/usage
title: Usage
position: 2
seo_title: Guidelines for Using the SplitButton Component
seo_description: Get the knack of the Telerik and Kendo UI SplitButton and learn
  how to use and implement the component by following the instructions and
  recommendations in the user guidelines created by our designers.
---
## 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. 

<DosDonts>
<Do description="Logically group actions or commands with similar meaning.">![A Telerik and Kendo UI SplitButton displaying four related paste options within its drop-down menu.](images/components-splitbutton-usage-grouping-do.png "Group similar actions or commands within the drop-down menu of the Telerik and Kendo UI SplitButton in a logical way.")</Do>
<Dont description="Avoid grouping actions and commands which are mutually exclusive or have nothing in common.">![A Telerik and Kendo UI SplitButton displaying four logically diverse commands in its drop-down menu, namely, Paste plain text, Set custom format, Spell checker, and Import.](images/components-splitbutton-usage-grouping-dont.png "Do not group actions and commands in the drop-down menu of the Telerik and Kendo UI SplitButton that have nothing in common or are mutually exclusive.")</Dont>
</DosDonts>


### 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.

<DosDonts>
<Do description="To 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.">![A Telerik and Kendo UI SplitButton with an icon-only label and a drop-down menu of options each displayed with an icon and its corresponding text.](images/components-splitbutton-usage-content-do.png "Use icons for the label of the Telerik and Kendo UI SplitButton and icons and explanatory text for the list items within its drop-down menu.")</Do>
<Dont description="Avoid 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. ">![A Telerik and Kendo UI SplitButton with an icon-only label and list items within its drop-down menu.](images/components-splitbutton-usage-content-dont.png "Do not use icon-only list items within the drop-down menu of the Telerik and Kendo UI SplitButton.")</Dont>
</DosDonts>


### 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.

<DosDonts>
<Do description="Separate the groups within the drop-down menu if it is not possible to transfer them to a new SplitButton.">![A Telerik and Kendo UI SplitButton with an open drop-down menu displaying a group of four paste options, and a copy, cut, and import options separated from each other by a separator.](images/components-splitbutton-usage-hierarchy-do.png "Use separators to distinguish between single list items and list items with subitems in the drop-down menu of the Telerik and Kendo UI SplitButton.")</Do>
<Dont description="Avoid using submenu items as they take too much horizontal space and are hard to navigate with a mouse.">![A Telerik and Kendo UI SplitButton showing an open drop-down menu which displays a paste text option with submenu paste options, and a copy, cut, and import options.](images/components-splitbutton-usage-hierarchy-dont.png "Do not use submenu items within the drop-down menu of the Telerik and Kendo UI SplitButton.")</Dont>
</DosDonts>