---
path: components/popup/usage
title: Usage
position: 2
seo_title: Guidelines for Using the Popup Component
seo_description: Get the knack of the Telerik and Kendo UI Popup and learn how
  to apply the alignment rules and content size options of the component by
  following the instructions and recommendations in the usage guidelines created
  by our designers.
---
## Usage Guidelines

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

### Alignment

The rules for aligning the Popup component with its anchor component can vary depending on the specific use case and design considerations. Generally, the Popup component should be either left or right aligned with the anchor component to ensure visual unity.

<DosDonts>
<Do description="Use left alignment to ensure that the popup is visually connected to its anchor component.">![A Telerik and Kendo UI SplitButton aligned with the Popup container to the left.](images/components-popup-usage-alignment-do.png "Aligning the Telerik and Kendo UI SplitButton and its Popup to the left.")</Do>
<Dont description="Avoid any random alignment of the popup to its anchor component because it can be confusing or frustrating for users.">![A Telerik and Kendo UI SplitButton aligned with the Popup container randomly and shifting left.](images/components-popup-usage-alignment-dont-do.png "Do not use random alignment of the Telerik and Kendo UI SplitButton and its Popup.")</Dont>
</DosDonts>

 

<DosDonts>
<Do description="Use right alignment to ensure that the popup is visually connected to its anchor component.">![A Telerik and Kendo UI SplitButton aligned with the Popup container to the right.](images/components-popup-usage-alignment2-do.png "Aligning the Telerik and Kendo UI SplitButton and its Popup to the right.")</Do>
<Dont description="Avoid any random alignment of the popup to its anchor component, because it can be confusing or frustrating for users.">![A Telerik and Kendo UI SplitButton aligned with the Popup container randomly and shifting right.](images/components-popup-usage-alignment2-dont.png "Do not use random alignment of the Telerik and Kendo UI SplitButton and its Popup.")</Dont>
</DosDonts>


### Content size

Consider the size of the Popup container so the content fits within the component.

<DosDonts>
<Do description="Size the popup container for its content.">![A correctly sized Telerik and Kendo UI Popup component.](images/components-popup-usage-popup-size-do.png "A Telerik and Kendo UI Popup component with content that fits in the container.")</Do>
<Dont description="Avoid using lengthy option descriptions in a small Popup container because the text can get truncated and users will find it difficult to read.">![An incorrectly sized Telerik and Kendo UI Popup component.](images/components-popup-usage-popup-size-dont.png "A Telerik and Kendo UI Popup component with truncated text that is dificult to read.")</Dont>
</DosDonts>