Pagination

Easily create a nice looking pagination to navigate through pages.

Table of contents

• Usage
• Style modifiers
• Size modifiers
• Alignment
• Accessibility
  • Internationalization

Usage

The Pagination component consists of button-like styled links, that are aligned side by side in a horizontal list.

Class	Description
.uk-pagination	Add this class to a <ul> element to define the Pagination component. Use <a> elements as pagination items within the list.
.uk-active	Add this class to a list item to apply an active state and use a <span> instead of an <a> element.
.uk-disabled	Add this class to a list item to apply a disabled state and use a <span> instead of an <a> element.

To add an icon, just add the data-uk-pagination-previous or data-uk-pagination-next attribute to a <span> element inside a pagination item.

Style modifiers

There are several style modifiers available. Just add one of the following classes to apply a different look.

• .uk-pagination-default
• .uk-pagination-ghost
• .uk-pagination-primary
• .uk-pagination-secondary
• .uk-pagination-success
• .uk-pagination-warning
• .uk-pagination-info
• .uk-pagination-danger

Size modifiers

There are several size modifiers available. Just add one of the following classes to make the pagination smaller or larger.

Class	Description
.uk-pagination-xsmall	Applies extra small size.
.uk-pagination-small	Applies small size.
.uk-pagination-medium	Applies medium size.
.uk-pagination-large	Applies large size.

Alignment

The Pagination component utilizes flexbox, so navigations can easily be aligned with Flex utility classes from Tailwind CSS.

Accessibility

The previous/next pagination adheres to the button pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.

• The prev/next pagination items have the button role and the aria-label property.

Internationalization

The Pagination component uses the following translation strings. Learn more about translating components.

Key	Default	Description
label	Next/Previous page	aria-label attribute.