Components Pagination

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Pagination

Pagination is the method of splitting up content into discrete pages. It specifies the total number of pages and inidicates to a user the current page within the context of total pages.
Basic pagination
a
Live Patch
Live Redirect
heex 
          <.pagination link_type="a" class="mb-5" path="/:page" current_page={1} total_pages={10} />
<.pagination link_type="live_patch" class="mb-5" path="/:page" current_page={5} total_pages={10} />
<.pagination link_type="live_redirect" class="mb-5" path="/:page" current_page={10} total_pages={10} />
<.pagination path={fn page -> Routes.user_path(Endpoint, :index, [page: page]) end} current_page={1} total_pages={10} />
Interactive pagination
heex 
          <.pagination
  link_type="live_patch"
  path="/components/pagination/:page"
  current_page={@pagination_page} total_pages={10}
/>
Properties
elixir 
            # <.pagination>
  attr(:path, :string, default: "/:page", doc: "page path")
  attr(:class, :string, default: "", doc: "Parent div CSS class")
  attr(:link_type, :string, default: "a", values: ["a", "live_patch", "live_redirect"])
  attr(:total_pages, :integer, default: nil, doc: "sets a total page count")
  attr(:current_page, :integer, default: nil, doc: "sets the current page")
  attr(:sibling_count, :integer, default: 1, doc: "sets a sibling count")
  attr(:boundary_count, :integer, default: 1, doc: "sets a boundary count")
  attr(:show_boundary_chevrons, :boolean, default: false, doc: "shows boundary chevrons")

  attr(:rest, :global)