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-pgn	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-pgn-previous or data-uk-pgn-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.

Class	Description
.uk-pgn-default	Adds the default style.
.uk-pgn-primary	Adds a primary style.
.uk-pgn-secondary	Adds a secondary style.
.uk-pgn-destructive	Adds a destructive style.
.uk-pgn-ghost	Adds a ghost style.

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-pgn-xs	Applies extra small size.
.uk-pgn-sm	Applies small size.
.uk-pgn-md	Applies medium size.
.uk-pgn-lg	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.