---
path: components/buttongroup/usage
title: Usage
position: 2
seo_title: Guidelines for Using the ButtonGroup Component
seo_description: Get the knack of the Telerik and Kendo UI ButtonGroup and learn
  how to use the fill modes, sizing and content options of the component by
  following the instructions and recommendations in the user guidelines created
  by our designers.
---
## Usage Guidelines

In addition to the guidelines for using the Telerik and Kendo UI Button, the ButtonGroup requires you to follow some basic principles when using the multi-button component.

### Fill Modes

The ButtonGroup includes buttons with the solid, outline, and flat fill modes, which put different emphasis on the indicated actions.

<DosDonts>
<Do description="Use different fill modes to differentiate the importance of actions the buttons in the group imply (high, medium, or low).">![Two Telerik and Kendo UI ButtonGroups with different fill modes indicating different levels of importance.](images/components-buttongroup-usage-fill-mode-do.png "Render Telerik and Kendo UI ButtonGroups with different fill modes to imply different levels of importance.")</Do>
<Dont description="Avoid mixing buttons with different fill modes inside a single ButtonGroup where all buttons are of equal importance.">![Telerik and Kendo UI Buttons with different fill modes inside a single ButtonGroup component.](images/components-buttongroup-usage-fill-mode-dont.png "Do not render Telerik and Kendo UI Buttons implying a similar level of importance with different fill modes inside a single ButtonGroup component.")</Dont>
</DosDonts>


### Size

Depending on the purpose of the component, the ButtonGroup enables you to apply the small, large, or the default medium sizing option to smoothly fit into the UI. For example, small-sized ButtonGroups are suitable for compact components such as small Pagers and Toolbars, while large-sized ButtonGroups are well-suited for large Pagers and Toolbars.

<DosDonts>
<Do description="Use the variety of font sizes depending on the context&mdash;small-sized components nest small ButtonGroups, large-sized components nest large ButtonGroups.">![A Telerik and Kendo UI ButtonGroup using consistent sizing for its containing buttons which indicate actions of equal importance.](images/components-buttongroup-usage-sizes-do.png "Use consistent fonts and size for the buttons inside a Telerik and Kendo UI ButtonGroup depending on the context of the whole component.")</Do>
<Dont description="Avoid combining Buttons of different sizes inside a single ButtonGroup.">![A Telerik and Kendo UI ButtonGroup using different sizing for the buttons inside a single component.](images/components-buttongroup-usage-sizes-dont.png "Do not use different fonts and sizes for buttons of equal importance and inside a single Telerik and Kendo UI ButtonGroup component.")</Dont>
</DosDonts>


### Content

As all the buttons within the ButtonGroup are of equal importance, make sure that their appearance is the same and their content type is similar.

<DosDonts>
<Do description="Feel free to use icon buttons, text buttons, or icon-and-text buttons depending on the actions they represent.">![A Telerik and Kendo UI ButtonGroup using icon-only buttons to present the available actions to the user.](images/components-buttongroup-usage-content-do.png "Use only a single type of buttons inside the Telerik and Kendo UI ButtonGroup to present the available actions to the user, for example, icon, icon-and-text, or text-only.")</Do>
<Dont description="Avoid mixing different types of content in a single ButtonGroup.">![A Telerik and Kendo UI ButtonGroup using icon and icon-and-text buttons inside the component.](images/components-buttongroup-usage-content-dont.png "Do not use a mixture of button types, for example, a combination between icon, icon-and-text, and text-only, inside a single Telerik and Kendo UI ButtonGroup component.")</Dont>
</DosDonts>