daisyUI Kit 🌼

Pagination

How to build pagination UI with DaisyUI Kit.

Components

There is no Pagination component. Instead you can use the Join component around buttons and other inputs.

Join

See the Join component docs.

With Join

Code Example 
<Join>
  <Button join>1</Button>
  <Button join active>2</Button>
  <Button join>3</Button>
  <Button join>4</Button>
</Join>

With a Disabled Button

Code Example 
<Join>
  <Button join>1</Button>
  <Button join>2</Button>
  <Button join disabled>...</Button>
  <Button join>99</Button>
  <Button join>100</Button>
</Join>

With a Arrow Icon Buttons

Code Example 
<Join>
  <Button join>«</Button>
  <Button join>Page 22</Button>
  <Button join>»</Button>
</Join>

Next / Prev Buttons

Code Example 
<Join class="grid grid-cols-2">
  <Button join outline>Previous page</Button>
  <Button join outline>Next</Button>
</Join>