Roxo - Premium Admin Template

- Notifications
  Check all
- Gary Hogan5 mins ago
  
  I have add 2 files for new task
  
  1_day_task.pdf1 MB
  
  day_task.pdf4 MB
- Edwin Day30 mins ago
  
  Marked the bug analysis task as done
- Ralph Waters45 mins ago
  
  New bugs added for designer
- Bookmark
- - Email
  - Feather icon
  - Chat
- Cart
  Check all
- Mi Watch Revolve
  
  $ 10.00
- Ulrich Duffel Bag
  
  $140.00
- Tree Stylish Pot
  
  $ 840.00
- Total
  
  $ 990.00
- Proceed to checkout
- Messages
  Send a new message
- Robert fox
  
  Lorem Ipsum is simply dummy give information
  10 mins ago
  online
- Andrew Young
  
  Lorem Ipsum is simply dummy give information
  25 mins ago
  warning
- Lucia Slaughter
  
  Lorem Ipsum is simply dummy give information
  1 hr ago
  online
Helen Walter
Admin
- Inbox
- Taskboard
- Log out

Pagination

ADMIN PANEL

Pagination

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

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

With Disabled

Set disable btn with the help of .btn-disabled class.

Preview Html

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

With Forward-Backward

You can set Forward-Backward button with pagination.

Preview Html

   <div class="overflow-auto custom-scroll">
   <div class="flex">
       <button class="border rounded-none btn border-light hover:bg-primary group">
          <a iconly-Arrow-Left-2 class="text-[18px]"></a>
       </button>
       <button class="border rounded-none btn btn-active border-light text-title hover:bg-primary hover:text-white"> 13 </button>
       <button class="text-white border rounded-none btn btn-active border-light bg-primary whitespace-nowrap"> Page 14 </button>
       <button class="border rounded-none btn btn-active border-light text-title hover:bg-primary hover:text-white"> 15 </button>
       <button class="border rounded-none btn border-light hover:bg-primary group">
          <a iconly-Arrow-Right-2 class="text-[18px]"></a>
       </button>
   </div>
</div>

With Preview-Next

You can add Preview-Next button with pagination.

Preview Html

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

With Outline

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

Preview Html

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

With Icon

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

Preview Html

   <div class="overflow-auto custom-scroll">
   <div class="flex">
      <button class="flex items-center gap-1 border rounded-none btn border-light hover:bg-primary group hover:text-white"> 
        <a iconly-Arrow-Left-2 class="text-[18px]"></a> 
      </button>
      <button class="border rounded-none btn border-light text-title hover:bg-primary hover:text-white"> 1 </button>
      <button class="text-white border rounded-none btn btn-active border-light bg-primary hover:bg-primary hover:text-white"> 2 </button>
      <button class="border rounded-none btn border-light text-title hover:bg-primary hover:text-white"> 3 </button>
      <button class="flex items-center gap-1 border rounded-none btn border-light hover:bg-primary group hover:text-white"> Next 
          <a iconly-Arrow-Right-2 class="text-[18px]"></a>
      </button>
   </div>
</div>

Sizes

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

Preview Html

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

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

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

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

With Different Colors

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

Preview Html

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

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

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

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

Pagination

Pagination

With Disabled

With Forward-Backward

With Preview-Next

With Outline

With Icon

Sizes

With Different Colors

Template Mode

Layout Type

Sidebar Type