Pagination

Pagination

You can add pagination with the help of .btn class.

 <div class="custom-scroll overflow-auto">
  <div class="flex">
      <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 1 </button>
      <button class="btn btn-active text-white border border-border-light bg-primary rounded-none hover:bg-primary hover:text-white"> 2 </button>
      <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 3 </button>
      <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 4 </button>
      <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 5 </button>
      <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 6 </button>
  </div>
</div>

With Disabled

You can set disable btn with the help of .btn-disabled class.

 <div class="custom-scroll overflow-auto">
   <div class="flex">
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 1 </button>
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 2 </button>
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 3 </button>
       <button class="btn btn-disable border border-border-light bg-gray-light rounded-none !cursor-auto"> ... </button>
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 9 </button>
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 10 </button>
   </div>
</div>

With Forward-Backward

You can set Forward-Backward button with pagination.

 <div class="custom-scroll overflow-auto">
   <div class="flex">
       <button class="btn border border-border-light rounded-none hover:bg-primary group">
          +SVG_ICON("Double-Alt-Arrow-Left" ,"w-[20px] h-[20px] group-hover:stroke-white")
       </button>
       <button class="btn btn-active border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 13 </button>
       <button class="btn btn-active border border-border-light rounded-none text-white bg-primary whitespace-nowrap"> Page 14 </button>
       <button class="btn btn-active border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 15 </button>
       <button class="btn border border-border-light rounded-none hover:bg-primary group">
          +SVG_ICON("Double-Alt-Arrow-Right" ,"w-[20px] h-[20px] group-hover:stroke-white")
       </button>
   </div>
</div>

With Preview-Next

You can add Preview-Next button with pagination.

 <div class="custom-scroll overflow-auto">
   <div class="flex">
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> Preview </button>
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 1 </button>
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 2 </button>
       <button class="btn btn-active border border-border-light rounded-none text-white bg-primary hover:bg-primary hover:text-white"> 3 </button>
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 4 </button>
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> Next </button>
   </div>
</div>

With Outline

You can add pagination with the help of .btn class.

 <div class="custom-scroll overflow-auto">
   <div class="flex">
       <button class="btn border border-border-light rounded-none text-title hover:border-primary hover:text-primary"> 1 </button>
       <button class="btn border border-border-light rounded-none text-title hover:border-primary hover:text-primary"> 2 </button>
       <button class="btn btn-active text-primary border border-border-light bg-primary rounded-none hover:border-primary hover:text-primary"> 3 </button>
       <button class="btn border border-border-light rounded-none text-title hover:border-primary hover:text-primary"> 4 </button>
       <button class="btn border border-border-light rounded-none text-title hover:border-primary hover:text-primary"> 5 </button>
   </div>
</div>

With Icon

You can set Forward-Backward button with icons in pagination.

 <div class="custom-scroll overflow-auto">
   <div class="flex">
      <button class="btn border border-border-light rounded-none flex items-center gap-1 hover:bg-primary group hover:text-white"> 
          +SVG_ICON("Double-Alt-Arrow-Left" ,"w-[20px] h-[20px] group-hover:stroke-white") Preview 
      </button>
      <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 1 </button>
      <button class="btn btn-active text-white border border-border-light bg-primary rounded-none hover:bg-primary hover:text-white"> 2 </button>
      <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 3 </button>
      <button class="btn border border-border-light rounded-none flex items-center gap-1 hover:bg-primary group hover:text-white"> Next 
          +SVG_ICON("Double-Alt-Arrow-Right" ,"w-[20px] h-[20px] group-hover:stroke-white") 
      </button>
   </div>
</div>

Sizes

You can set different size of pagination with the help of .btn-* class.

 <div class="custom-scroll overflow-auto">
  <div class="flex flex-col gap-2">
     <div class="flex">
         <button class="btn btn-xs border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 1 </button>
         <button class="btn btn-xs btn-active text-white border border-border-light bg-primary rounded-none hover:bg-primary hover:text-white"> 2 </button>
         <button class="btn btn-xs border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 3 </button>
         <button class="btn btn-xs border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 4 </button>
         <button class="btn btn-xs border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 5 </button>
         <button class="btn btn-xs border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 6 </button>
     </div>

     <div class="flex">
         <button class="btn btn-sm border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 1 </button>
         <button class="btn btn-sm border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 2 </button>
         <button class="btn btn-sm border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 3 </button>
         <button class="btn btn-sm btn-active text-white border border-border-light bg-primary rounded-none hover:bg-primary hover:text-white"> 4 </button>
         <button class="btn btn-sm border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 5 </button>
         <button class="btn btn-sm border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 6 </button>
     </div>

     <div class="flex">
         <button class="btn btn-md border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 1 </button>
         <button class="btn btn-md btn-active text-white border border-border-light bg-primary rounded-none hover:bg-primary hover:text-white"> 2 </button>
         <button class="btn btn-md border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 3 </button>
         <button class="btn btn-md border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 4 </button>
         <button class="btn btn-md border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 5 </button>
         <button class="btn btn-md border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 6 </button>
     </div>

     <div class="flex">
         <button class="btn btn-lg border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 1 </button>
         <button class="btn btn-lg border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 2 </button>
         <button class="btn btn-lg border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 3 </button>
         <button class="btn btn-lg border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 4 </button>
         <button class="btn btn-lg btn-active text-white border border-border-light bg-primary rounded-none hover:bg-primary hover:text-white"> 5 </button>
         <button class="btn btn-lg border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 6 </button>
     </div>
  </div>
</div>

With Different Colors

You can set different colors of pagination using .bg-* class.

 <div class="custom-scroll overflow-auto">
  <div class="flex flex-col gap-2">
     <div class="flex justify-start">
         <button class="btn border border-border-light rounded-none text-title hover:bg-info hover:text-white"> 1 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-info hover:text-white"> 2 </button>
         <button class="btn btn-active text-white border border-border-light bg-info rounded-none hover:bg-info hover:text-white"> 3 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 4 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 5 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 6 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 7 </button>
     </div>

     <div class="flex justify-center">
         <button class="btn btn-active text-white border border-border-light bg-primary rounded-none hover:bg-primary hover:text-white"> 1 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 2 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 3 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 4 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 5 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> 6 </button>
     </div>

     <div class="flex justify-center">
         <button class="btn border border-border-light rounded-none text-title hover:bg-warning hover:text-white"> 1 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-warning hover:text-white"> 2 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-warning hover:text-white"> 3 </button>
         <button class="btn btn-active text-white border border-border-light bg-warning rounded-none hover:bg-warning hover:text-white"> 4 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-warning hover:text-white"> 5 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-warning hover:text-white"> 6 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-warning hover:text-white"> 7 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-warning hover:text-white"> 8 </button>
     </div>

     <div class="flex justify-end">
         <button class="btn border border-border-light rounded-none text-title hover:bg-secondary hover:text-white"> 1 </button>
         <button class="btn btn-active text-white border border-border-light bg-secondary rounded-none hover:bg-secondary hover:text-white"> 2 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-secondary hover:text-white"> 3 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-secondary hover:text-white"> 4 </button>
         <button class="btn border border-border-light rounded-none text-title hover:bg-secondary hover:text-white"> 5 </button>
    </div>
  </div>
</div>

With Different Colors

You can set different colors of pagination using .bg-* class.

 <div class="custom-scroll overflow-auto">
   <div class="flex">
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> Preview </button>
       <button class="btn border border-border-light rounded-none text-title hover:bg-primary hover:text-white"> Preview </button>
   </div>
</div>

Copyright 2023 © Dexo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Reset Buy Now