Navigation
Pagination
Pagination is a set of controls, typically buttons or links, for navigating between multiple pages of content.
Basic example
Default
Basic pagination with the default style has been implemented. To denote the active state, we utilized `aria-[current='page']:{tw-utility-class}` for styling.
Variants
Soft
By applying the `btn-soft` modifier class, it will transform into a soft pagination type.
Outline
By applying the `btn-outline` modifier class, it will transform into a outline pagination type.
Shape
Default
Default shape example.
Square
The `btn` class inherently includes the `rounded` utility, so by applying `rounded-none`, we can eliminate the rounded corners, creating square-shaped pagination.
Circle
The `rounded-full` class rounds the "Previous" and "Next" buttons, while the `btn-circle` class creates circular pagination buttons.
Sizes
Pagination sizes
To create smaller or larger buttons, use the `btn-xs`, `btn-sm` and `btn-lg` responsive classes.
Alignment
Pagination alignment
To change the alignment of pagination components, use classes like `justify-center` to center them or `justify-end` to align them to the right.
Responsive
Text to icon
On smaller screens, the text changes to an icon.
Illustrations
Disabled
The previous button is disabled since it cannot go beyond page 1.
Mini
Mini size pagination.
Button group
Group pagination uses the Join component.
With icon
Utilize the provided code to display basic previous and next elements with icons.
Working with Tooltip
Pagination variant featuring tooltips.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
aria-[current='page']:{tw-utility-class} | modifier | Marks a pagination item as active by applying the corresponding utility class. |
text-bg-{semantic-color} | modifier | Sets both text and background colors using the specified semantic color. |
text-bg-soft-{semantic-color} | modifier | Applies a soft version of text and background colors using the selected semantic color. |
text-border-{semantic-color} | modifier | Adds an outline styled with the chosen semantic color. |