# Pagination
{"1"} {"2"} {"3"}
```astro --- --- 1 2 3 ``` ## Installation ```bash bunx bejamas add pagination ``` ```bash npx bejamas add pagination ``` ```bash pnpm dlx bejamas add pagination ``` ```bash yarn dlx bejamas add pagination ``` ## Usage ```astro nocollapse --- --- 1 2 3 ``` ## Rendering pages Pagination is plain links and ships no JavaScript. Work out the pages on the server and map them to items: ```astro nocollapse --- const current = Number(Astro.url.searchParams.get('page') ?? 1); const total = 10; const pages = [...new Set([1, current - 1, current, current + 1, total])] .filter((page) => page >= 1 && page <= total) .sort((a, b) => a - b); --- {pages.map((page, index) => ( <> {index > 0 && page - pages[index - 1] > 1 && ( )} {page} ))} ``` ## Props | Prop | Type | Default | |---|---|---| | class | `string` | `""` | ## Examples ### First and last `PaginationFirst` and `PaginationLast` jump to either end. Pass `disabled` to the controls that lead nowhere; they render without an `href` and with `aria-disabled="true"`.
{"1"} {"2"} {"3"} {"10"}
```astro --- --- 1 2 3 10 ``` ### Icon only Set `text=""` on the previous, next, first and last controls to render square icon buttons. Their `aria-label` still names the destination.
{"1"} {"2"} {"3"} {"10"}
```astro --- --- 1 2 3 10 ``` ### Outlined `variant` overrides the default `ghost` (inactive) and `outline` (active) button variants.
{"1"} {"2"} {"3"} {"10"}
```astro --- --- 1 2 3 10 ``` ### Simple
{"1"} {"2"} {"3"} {"4"} {"5"}
```astro --- --- 1 2 3 4 5 ``` ## API Reference ### Parts | Part | Element | Description | |------|---------|-------------| | `Pagination` | `