Pagination

<.pagination
  page={@page}
  total_pages={@total_pages}
  on_page_change="page_changed"
/>

Few Pages

When there are 7 or fewer pages, all page numbers are shown without ellipsis.

<.pagination page={3} total_pages={5} on_page_change="page_changed" />

Sibling Count

Use the sibling_count prop to control how many pages are shown on each side of the current page.

<.pagination
  page={10}
  total_pages={20}
  sibling_count={2}
  on_page_change="page_changed"
/>

Custom Previous/Next

Use the previous and next slots for custom button content.

<.pagination page={5} total_pages={10} on_page_change="page_changed">
  <:previous>Previous</:previous>
  <:next>Next</:next>
</.pagination>

Edge Cases

The pagination component handles edge cases gracefully.

<.pagination page={1} total_pages={20} on_page_change="page_changed" />

<.pagination page={20} total_pages={20} on_page_change="page_changed" />

Accessibility

The pagination component includes proper ARIA attributes:

• Uses <nav> element with aria-label="Pagination"
• Current page marked with aria-current="page"
• Previous/next buttons have descriptive aria-labels
• Disabled buttons properly marked