Layout

Pagination

Previous/next navigation between pages. Links between two adjacent pages, or Previous / Page N of M / Next buttons for paging a collection.

fandry-pagination

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`previous-href`	`string`	`''`	Omit to hide the previous link (e.g. on the first page).
`previous-label`	`string`	`''`	Title of the previous page.
`next-href`	`string`	`''`	Omit to hide the next link (e.g. on the last page).
`next-label`	`string`	`''`	Title of the next page.
`page-index`	`number`	`undefined`	Zero-based current page. Setting it switches from links to Previous/Next buttons; listen for `change` (detail.pageIndex) and update it. Replace controls via the previous, status and next slots, or just the buttons' words via previous-text and next-text.
`page-count`	`number`	`-1`	Total pages in page mode; -1 means unknown (Next stays enabled).
`aria-label`	`string`	`—`	Names this nav landmark, e.g. "Results pages". Overrides messages.label.
`messages`	`{ label, status(page, pageCount) }`	`{}`	Replaces the default landmark name ("Pagination") and page mode's status line, e.g. to translate them. Link mode's "Previous" / "Next" lines are the previous-eyebrow and next-eyebrow slots.

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`base`	The outermost element.
`link`	The native `<a>`.
`previous`	The link to the previous page (also a `link`), or the viewer's button to the previous picture.
`eyebrow`	The small "Previous" / "Next" line.
`title`	The title line.
`next`	The link to the next page (also a `link`), or the viewer's button to the next picture.
`status`	A status line (a page count, "Searching…").
`button`	The Previous and Next buttons, or a tile's button (a fandry-button's `base`).

States are extra names on a part while the state is on. Name both to style one state, e.g.fandry-checkbox::part(control checked).

State	Description
`disabled`	A control, option or item that cannot be used.

<!-- template -->
<div class="brand stack">
  <fandry-pagination
    previous-href="#"
    previous-label="Sizing guide"
    next-href="#"
    next-label="Care instructions"
    onclick={handleNoopClick}
  ></fandry-pagination>
  <fandry-pagination page-index={pageIndex} page-count="5" onchange={handlePageChange}></fandry-pagination>
</div>

/* css */
/* Scoped to this demo. Set the same --fd-* tokens on :root to theme
   every fandry-* component on the site. */
.brand {
  --fd-primary: 160 84% 26%;
  --fd-radius-lg: 1rem;
  --fd-radius-md: 999px;
  --fd-border: 160 30% 85%;
}

fandry-pagination::part(link) {
  background: hsl(160 40% 97%);
}

fandry-pagination::part(eyebrow) {
  color: hsl(160 84% 26%);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

fandry-pagination::part(title) {
  font-weight: 700;
}

fandry-pagination::part(status) {
  font-weight: 600;
}

Code

Link to section Code

<fandry-pagination
  previous-href="/components/pagination"
  previous-label="Pagination"
  next-href="/components/sidebar"
  next-label="Sidebar"
></fandry-pagination>

Example: Page mode

Link to section Example: Page mode

Code

<!-- template -->
<fandry-pagination
  page-index={pageIndex}
  page-count={pageCount}
  onchange={handlePageChange}
></fandry-pagination>

// component
pageIndex = 0;
pageCount = 5;

handlePageChange(event) {
  this.pageIndex = event.detail.pageIndex;
}