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

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

### Fill Modes

The Button supports 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.">![Two Telerik and Kendo UI Buttons with different fill modes in a dialog.](images/components-button-usage-fill-mode-do.png "Render Telerik and Kendo UI Buttons with different fill modes to imply different levels of importance.")</Do>
<Dont description="Avoid using buttons with the same fill mode when they indicate a decision users must make or an action users must perform.">![Two Telerik and Kendo UI Buttons with the same fill mode in a dialog.](images/components-button-usage-fill-mode-dont.png "Do not render Telerik and Kendo UI Buttons with the same fill mode if they imply different levels of importance.")</Dont>
</DosDonts>


### Label Text

The label of the Button must be clear, straightforward, and leaving no room for misinterpretations.

<DosDonts>
<Do description="Use active verbs or phrases that clearly indicate the Button action.">![A Telerik and Kendo UI Button displaying with a clear action.](images/components-button-usage-label-text-do.png "Use simple and straightforward words in the label of the Telerik and Kendo UI Button to clearly indicate the action.")</Do>
<Dont description="Avoid using vague and generic labels which make the user read the dialog before taking action.">![A Telerik and Kendo UI Button showing ambiguous action to an unclear result.](images/components-button-usage-label-text-dont.png "Do not show ambiguous, misleading, or unclear actions in the label of the Telerik and Kendo UI Button.")</Dont>
</DosDonts>


### Label Width

Whether the Button renders an icon, icon and text, or text only, it must convey a clear message, be compact, concise, and tight-fitting.

<DosDonts>
<Do description="Keep the length of the Button label as short as possible.">![A Telerik and Kendo UI Button with a single word inside.](images/components-button-usage-label-width-do.png "Keep the label of the Telerik and Kendo UI Button as clear and short as possible.")</Do>
<Dont description="Avoid using too much text for the Button label.">![A Telerik and Kendo UI Button showing a four-word sentence inside ending with a period.](images/components-button-usage-label-width-dont.png "Do not use sophisticated and long words or expressions in the label of the Telerik and Kendo UI Button to indicate the action.")</Dont>
</DosDonts>


### Size

Depending on the purpose of the Telerik and Kendo UI Button, you can apply any of its supported sizing options to smoothly fit it into the UI. However, sizing needs extra attention when you combine two or more sizing variations in a single component.

<DosDonts>
<Do description="Use Buttons of different sizes in the context of the UI.">![Two Telerik and Kendo UI Buttons using consistent sizing relative to the dialog container that holds them.](images/components-button-usage-sizes-do.png "Use different sizes for Telerik and Kendo UI Buttons for the different UI context.")</Do>
<Dont description="Avoid combining Buttons of different sizes inside a single component.">![Two Telerik and Kendo UI Buttons using different sizing in a dialog container that holds them.](images/components-button-usage-sizes-dont.png "Do not combine Telerik and Kendo UI Buttons that are of different sizes and inside a single component.")</Dont>
</DosDonts>