---
title: Overview
position: 1
seo_title: Overview of the Pager Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Pager component and its types, check out the set of available options in its
  live demo, and master its appearance by setting its size.
---
## Pager Overview

A Pager is a user interface (UI) element that divides a large amount of data into multiple pages and navigates the users through them. Pagers are usually used in data tables, search results, and directories. They reduce the cognitive load, decrease the loading time, and optimize the screen space by displaying the content in small chunks.

The Telerik and Kendo UI Pager provides consistent styling. It wraps buttons, dropdown or an input, and pager info that indicates the number of items shown on the page. 

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/pager/appearance/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/pager/appearance"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/pager/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/datatools/pager/appearance/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/datatools/pager/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/pager"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/pager"}],"demo":"components/pager/overview"}'></LiveDemo>

### Appearance

Pagers provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI Pager, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

#### States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI Pager can acquire the following states which you can set by using the following classes:

* A Pager in its normal state allows interaction with the elements within it.
* `k-disabled`&mdash;The disabled Pager does not allow interaction with any elements within it as they are disabled, too.

#### Anatomy

The anatomy of the Pager summarizes the elements of the component.

Depending on the elements they display, the Telerik and Kendo UI Pagers can be any of the following types:

* `numeric`;Renders buttons with numbers.
* `input`&mdash;Renders a NumericTextBox for entering the page number.

<BlueprintImage data='{"description":"","labels":[{"text":"Numeric"},{"text":"Input"}]}'>![The available types of the Telerik and Kendo UI Pager component showing a numeric pager and an input pager.](images/components-pager-overview-variants.png "Two available variants of the Telerik and Kendo UI Pager component including a numeric pager and an input pager.")</BlueprintImage>

The next image shows the anatomy of a Pager and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"Container"},{"text":"Previous buttons: navigate to the previous pages"},{"text":"Numeric buttons: display the available pages (or a part of them)"},{"text":"Truncation: indicates additional pages that cannon be displayed with numeric buttons"},{"text":"Next buttons: navigate to the next pages"},{"text":"Page size option: allows the user to set the number of items on the page"},{"text":"Info: describes the range of items displayed up to the total"}]}'>![A Telerik and Kendo UI Pager component with the container, previous buttons, numeric buttons, truncation, next buttons, page size option, and info.](images/components-pager-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Pager including a container, previous buttons, numeric buttons, truncation, next buttons, page size option, and info.")</BlueprintImage>

#### Size

The Pager provides the `size` configuration option that enables you to control how big or small the rendered Pager will be. Pagers also provide options for size customization.

`size` provides the following available options:

* `small`&mdash;Renders a small Pager, used along with small components in UI designs where the available space is limited. 

  The small Telerik and Kendo UI Pager wraps small-sized components and applies a `$kendo-spacing, 1` spacing value for their paddings.
* `medium` (default)&mdash;Renders a medium Pager.

  The medium Telerik and Kendo UI Pager wraps medium-sized components and applies a  `$kendo-spacing, 2` spacing value for their paddings.
* `large`&mdash;Renders a large Pager which is used with adaptive components and in mobile devices. 

  The large Telerik and Kendo UI Pagers achieve the recommended touch area dimensions by wrapping large-sized components and applying a `$kendo-spacing, 2.5` spacing value for their paddings.
* `none`&mdash;Does not set a `size` and allows you to add your own, custom value.

<BlueprintImage data='{"description":"","labels":[{"text":"Medium (default)"},{"text":"Small"},{"text":"Large"}]}'>![Three Telerik and Kendo UI Pager components demonstrating the medium, small, and large sizes respectively.](images/components-pager-overview-size.png "Available sizes in the Telerik and Kendo UI Pager component including default medium, small, and large.")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Pager","description":"Find more information about the Kendo UI for Angular Pager in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/pager/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Pager","description":"Find more information about the Telerik UI for Blazor Pager in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/pager/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Pager","description":"Find more information about the Kendo UI for jQuery Pager in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/pager/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Pager","description":"Find more information about the KendoReact Pager in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/pager/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Pager","description":"Find more information about the Kendo UI for Vue Pager in the official product documentation of the component.","url":"http://www.telerik.com/kendo-vue-ui/components/pager/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Pager","description":"Find more information about the Telerik UI for ASP.NET Core Pager component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/data-management/pager/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Pager","description":"Find more information about the Telerik UI for ASP.NET MVC Pager component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/pager/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>