Pagination ​

Use pagination to let users move through an ordered collection of items that has been split into pages. Pagination uses buttons to move back and forth between pages.

Usage ​

<script lang="ts" setup>
import {
  Pagination,
  PaginationPreviousButton,
  PaginationNextButton,
} from '@returnless/focus-ui';
</script>

<template>
  <Pagination>
    <PaginationPreviousButton href="previous-page">Previous</PaginationPreviousButton>
    <PaginationNextButton href="next-page">Next</PaginationNextButton>
  </Pagination>
</template>

Best practices ​

Pagination should:

• Be placed at the bottom of a long list that has been split into pages.
• Pagination should navigate to the previous and next set of items in the paged list.
• Hint when users are at the first or the last page by disabling the corresponding button.