# Pagination Renders the page links for a list that is split across pages, with previous and next controls. ## About It builds the page numbers from the `data` array you pass, adds previous and next buttons, and marks the current page. The numbers come from the position in the array, not from the data itself. ## Example The `Pagination` component accepts a `data` prop, which is an array of objects. Each object represents a page link with a `url` and an optional `active` property to indicate the current page. Each `url` must be unique. Below is a simple example of how to use the `Pagination` component with static data: ```html ``` ## Alignment The `align` prop controls the horizontal position of the pagination. The accepted values are: `'start'`, `'center'`, and `'end'`. The default value is `center`. ```html ``` ## Sizing You can control the button size of the pagination with the `size` prop. Available values are: `'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'auto'`. Default value `md`. ```html ``` ## Flat Pagination Add `flat` attribute to the `Pagination` component to make the pagination flat/border-less. ```html ``` ## Prev/Next Button You can use the `hidePrevious`, `hideNext`, and `hidePreviousNext` attributes to control the visibility of navigation buttons in the Pagination component. The `hidePrevious` hides the previous button, `hideNext` hides the next button, and `hidePreviousNext` hides both. ### Hide Prev/Next Button The example below demonstrates how to hide the previous button, next button, or both using attributes. The first example hides the previous button, the second hides the next button, and the third hides both. ```html ``` ### Custom Previous/Next Button Content The `previousButton` and `nextButton` props allow you to customize the content of the previous and next buttons in the Pagination component. These props render as plain text, so you can use any character you like, such as an arrow or an angle quote. By default, `previousButton` is set to `"← Prev"`, and `nextButton` is set to `"Next →"`. You can modify these values to fit your needs, such as other words, arrows or symbols. ```html ``` ### Onclick Function In some cases, you may need custom functionality when clicking the previous or next button. You can achieve this using the `onPreviousClick` and `onNextClick` props by passing your custom functions to them. Each function receives the click `MouseEvent`. ```html ``` ## Hide Page Number Buttons In some cases, you may only need the previous and next buttons without page numbers. The Pagination component supports this by default - simply leave the `data` prop empty, and it will display only the previous and next buttons. ```html ``` ## Rounded Corner The `rounded` prop sets the corner radius of the page links. Available values are: `none`, `sm`, `md`, `lg`, `xl`, `2xl`, and `full`. Default value `md`. ```html ``` ## Animation Speed The `animationSpeed` prop controls the animation (hover animation in this case) speed of `Pagination`. Options include `'none'` for no animation, `'slower'` or `slow` for a gradual effect, `normal` (default) for standard speed, and `fast` or `faster` for quicker animations. ```html ``` ## Customization Use the `class` attribute to style the pagination container. To style the buttons, use these two props: - `buttonClasses`: Custom classes for the page number buttons that are not active, and the previous and next buttons. - `activeButtonClasses`: Custom classes for the active page button. ```html ``` Anything else you pass reaches the element itself, so an `id`, a `title`, a `data-*` attribute or an event handler all work the way they would on a `
`. ## Accessibility The Pagination component carries the roles and labels a screen reader needs, and every link answers to the keyboard. - **Keyboard Navigation**: Users can navigate through pagination using the tab key or the ← and → arrow keys to move focus, and Enter or Space to activate a button. - **ARIA Labels**: The component includes appropriate `aria-label` attributes for previous, next, and page buttons, improving screen reader support. The active page link is marked with `aria-current="page"`. - **Focus Indicators**: Clear focus styles ensure visibility when navigating with a keyboard. - **Semantic HTML**: Uses proper HTML elements (`button` and `a`) inside a `role="group"` container labeled `aria-label="Pagination"`, so assistive technology reads it as one group of page links. ## Configuration ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `data` | Array | `[]` | An array of pagination links, where each object contains a URL and an optional active state. Each URL must be unique. | | `align` | 'start' \| 'center' \| 'end' | `center` | Defines the alignment of the pagination. Options are 'start' for left, 'center' for middle, and 'end' for right. | | `size` | [BUTTON_SIZE](https://www.theui.dev/docs/types#button-size-type) | `md` | Controls the size of the pagination buttons. Accepts predefined button size values. | | `previousButton` | string | `← Prev` | Text of the previous button. It renders as plain text. | | `nextButton` | string | `Next →` | Text of the next button. It renders as plain text. | | `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `md` | Determines the border radius of the pagination buttons. | | `animationSpeed` | [ANIMATE_SPEED](https://www.theui.dev/docs/types#animation-speed-type) | `normal` | Controls the animation speed of pagination interactions. Options include 'none', 'slower', 'slow', 'normal', 'fast', and 'faster'. | | `activeButtonClasses` | string | `` | Custom CSS classes to style the active pagination button. | | `buttonClasses` | string | `` | Custom CSS classes to style all pagination buttons. | ### Dynamic props | Name | Description | | --- | --- | | `flat` | This attribute makes the Pagination border-less to make it flat and minimalist. | | `hidePrevious` | This attributes hides the previous button in the Pagination. | | `hideNext` | This attributes hides the next button in the Pagination. | | `hidePreviousNext` | This attributes hides both previous and next button in the Pagination. | ### Functions | Name | Description | | --- | --- | | `onPreviousClick` | Triggers on click on the previous button. Type: `(e: MouseEvent) => void`. | | `onNextClick` | Triggers on click on the next button. Type: `(e: MouseEvent) => void`. | --- Category: Components Keywords: pagination, navigation, data, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt