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:

1 2 3 4
Svelte 
<script>
  let data = [
    { url: "?page=1" },
    { url: "?page=2", active: true },  // Current page
    { url: "?page=3" },
    { url: "?page=4" }
  ];
</script>

<Pagination {data} />

Alignment

The align prop controls the horizontal position of the pagination. The accepted values are: 'start', 'center', and 'end'. The default value is center.

1 2 3 4
1 2 3 4
1 2 3 4
Svelte 
<Pagination {data} align="start" />
<Pagination {data} align="center" />
<Pagination {data} align="end" />

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.

1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
Svelte 
<Pagination {data} size="xs" />
<Pagination {data} size="sm" />
<Pagination {data} size="md" />
<Pagination {data} size="lg" />
<Pagination {data} size="xl" />

Flat Pagination

Add flat attribute to the Pagination component to make the pagination flat/border-less.

1 2 3 4
Svelte 
<Pagination {data} flat />

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.

1 2 3 4
1 2 3 4
1 2 3 4
Svelte 
<Pagination {data} hidePrevious />
<Pagination {data} hideNext />
<Pagination {data} hidePreviousNext />

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.

1 2 3 4
Svelte 
<Pagination {data} previousButton="‹" nextButton="›" />

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.

1 2 3 4
Svelte 
<script>
  let prevFunction = () => {
    alert("Hello from previous function!")
  }

  let nextFunction = () => {
    alert("Hello from next function!")
  }
</script>

<Pagination {data} onPreviousClick={prevFunction} onNextClick={nextFunction} />

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.

Svelte 
<Pagination />

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.

1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
Svelte 
<Pagination {data} rounded="none" />
<Pagination {data} rounded="sm" />
<Pagination {data} rounded="md" />
<Pagination {data} rounded="lg" />
<Pagination {data} rounded="xl" />
<Pagination {data} rounded="full" />

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.

1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
Svelte 
<Pagination {data} animationSpeed="slower" />
<Pagination {data} animationSpeed="slow" />
<Pagination {data} animationSpeed="normal" />
<Pagination {data} animationSpeed="fast" />
<Pagination {data} animationSpeed="faster" />
<Pagination {data} animationSpeed="none" />

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.
1 2 3 4
Svelte 
<Pagination
  {data}
  buttonClasses="text-emerald-700 hover:bg-emerald-100"
  activeButtonClasses="bg-emerald-600 text-white"
/>

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 <div>.

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