Django Pagination Component

Pagination renders daisyUI-styled page controls. Pass current page, total pages, and a URL pattern — labb generates previous, next, and numbered page links automatically.

Basic Pagination

Preview

Code

<c-lb.pagination>
  <c-lb.pagination.item>1</c-lb.pagination.item>
  <c-lb.pagination.item active>2</c-lb.pagination.item>
  <c-lb.pagination.item>3</c-lb.pagination.item>
  <c-lb.pagination.item>4</c-lb.pagination.item>
</c-lb.pagination>

Sizes

Preview

Code

<div class="flex flex-col items-start gap-4">
  <c-lb.pagination>
    <c-lb.pagination.item size="xs">1</c-lb.pagination.item>
    <c-lb.pagination.item size="xs" active>2</c-lb.pagination.item>
    <c-lb.pagination.item size="xs">3</c-lb.pagination.item>
  </c-lb.pagination>
  <c-lb.pagination>
    <c-lb.pagination.item size="sm">1</c-lb.pagination.item>
    <c-lb.pagination.item size="sm" active>2</c-lb.pagination.item>
    <c-lb.pagination.item size="sm">3</c-lb.pagination.item>
  </c-lb.pagination>
  <c-lb.pagination>
    <c-lb.pagination.item size="md">1</c-lb.pagination.item>
    <c-lb.pagination.item size="md" active>2</c-lb.pagination.item>
    <c-lb.pagination.item size="md">3</c-lb.pagination.item>
  </c-lb.pagination>
  <c-lb.pagination>
    <c-lb.pagination.item size="lg">1</c-lb.pagination.item>
    <c-lb.pagination.item size="lg" active>2</c-lb.pagination.item>
    <c-lb.pagination.item size="lg">3</c-lb.pagination.item>
  </c-lb.pagination>
</div>

With Disabled

Preview

Code

<c-lb.pagination>
  <c-lb.pagination.item>Previous</c-lb.pagination.item>
  <c-lb.pagination.item>1</c-lb.pagination.item>
  <c-lb.pagination.item active>2</c-lb.pagination.item>
  <c-lb.pagination.item>3</c-lb.pagination.item>
  <c-lb.pagination.item disabled>...</c-lb.pagination.item>
  <c-lb.pagination.item>Next</c-lb.pagination.item>
</c-lb.pagination>

With Icons

Preview

Code

<c-lb.pagination>
  <c-lb.pagination.item icon="rmx.arrow-left"></c-lb.pagination.item>
  <c-lb.pagination.item>1</c-lb.pagination.item>
  <c-lb.pagination.item active>2</c-lb.pagination.item>
  <c-lb.pagination.item>3</c-lb.pagination.item>
  <c-lb.pagination.item disabled>...</c-lb.pagination.item>
  <c-lb.pagination.item icon.end="rmx.arrow-right"></c-lb.pagination.item>
</c-lb.pagination>

API Reference

`c-lb.pagination`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply

Slot Name	Description
default	Pagination items using pagination.item components

`c-lb.pagination.item`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
active	boolean	`False`	No	Whether this is the active/current page
disabled	boolean	`False`	No	Whether the button is disabled
size	xs sm md lg xl	-	No	Button size
icon	string	-	No	Icon name to display
↳ .fill	modifier	-	No	Render in filled (solid) style
↳ .end	modifier	-	No	Place at the end of the text
icon.class	string	-	No	Additional CSS classes for the icon

Slot Name	Description
default	Button content (page number or navigation text)