Govo - Premium Admin Template

Pagination

Add pagination with the help of .btn class.

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

Disabled

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

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

Forward-Backward

Add Forward-Backward button with pagination.

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

Preview-Next

Add Preview-Next button with pagination.

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

Rounded

Add pagination with the help of .btn class.

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

With Icon

Set Forward-Backward button with icons in pagination.

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

Sizes

Set different size of pagination with the help of .btn-* class.

<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-border-light text-title hover:bg-primary hover:text-white dark:border-border-dark"> 1 </button>
         <button class="text-white border rounded-none btn btn-xs btn-active border-border-light bg-primary hover:bg-primary hover:text-white dark:border-border-dark"> 2 </button>
         <button class="border rounded-none btn btn-xs border-border-light text-title hover:bg-primary hover:text-white dark:border-border-dark"> 3 </button>
         <button class="border rounded-none btn btn-xs border-border-light text-title hover:bg-primary hover:text-white dark:border-border-dark"> 4 </button>
         <button class="border rounded-none btn btn-xs border-border-light text-title hover:bg-primary hover:text-white dark:border-border-dark"> 5 </button>
         <button class="border rounded-none btn btn-xs border-border-light text-title hover:bg-primary hover:text-white dark:border-border-dark"> 6 </button>
     </div>

     <div class="flex">
         <button class="border rounded-none btn btn-sm border-border-light text-title hover:bg-warning hover:text-white dark:border-border-dark"> a </button>
         <button class="border rounded-none btn btn-sm border-border-light text-title hover:bg-warning hover:text-white dark:border-border-dark"> b </button>
         <button class="border rounded-none btn btn-sm border-border-light text-title hover:bg-warning hover:text-white dark:border-border-dark"> c </button>
         <button class="text-white border rounded-none btn btn-sm btn-active border-border-light bg-warning hover:bg-warning hover:text-white dark:border-border-dark"> d </button>
         <button class="border rounded-none btn btn-sm border-border-light text-title hover:bg-warning hover:text-white dark:border-border-dark"> e </button>
         <button class="border rounded-none btn btn-sm border-border-light text-title hover:bg-warning hover:text-white dark:border-border-dark"> f </button>
     </div>

     <div class="flex">
         <button class="border rounded-none btn btn-md border-border-light text-title hover:bg-danger hover:text-white dark:border-border-dark"> I </button>
         <button class="text-white border rounded-none btn btn-md btn-active border-border-light bg-danger hover:bg-danger hover:text-white dark:border-border-dark"> II </button>
         <button class="border rounded-none btn btn-md border-border-light text-title hover:bg-danger hover:text-white dark:border-border-dark"> III </button>
         <button class="border rounded-none btn btn-md border-border-light text-title hover:bg-danger hover:text-white dark:border-border-dark"> VI </button>
         <button class="border rounded-none btn btn-md border-border-light text-title hover:bg-danger hover:text-white dark:border-border-dark"> V </button>
         <button class="border rounded-none btn btn-md border-border-light text-title hover:bg-danger hover:text-white dark:border-border-dark"> VI </button>
     </div>

     <div class="flex">
         <button class="border rounded-none btn btn-lg border-border-light text-title hover:bg-info hover:text-white dark:border-border-dark sm:!p-[14px]"> A </button>
         <button class="border rounded-none btn btn-lg border-border-light text-title hover:bg-info hover:text-white dark:border-border-dark sm:!p-[14px]"> B </button>
         <button class="border rounded-none btn btn-lg border-border-light text-title hover:bg-info hover:text-white dark:border-border-dark sm:!p-[14px]"> C </button>
         <button class="border rounded-none btn btn-lg border-border-light text-title hover:bg-info hover:text-white dark:border-border-dark sm:!p-[14px]"> D </button>
         <button class="text-white border rounded-none btn btn-lg btn-active border-border-light bg-info hover:bg-info hover:text-white dark:border-border-dark sm:!p-[14px]"> E </button>
         <button class="border rounded-none btn btn-lg border-border-light text-title hover:bg-info hover:text-white dark:border-border-dark sm:!p-[14px]"> F </button>
     </div>
  </div>
</div>

Pagination Alignment

Set different colors of pagination using .bg-* class.

<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-border-light text-title hover:bg-info hover:text-white dark:border-border-dark dark:border sm:!p-2"> 1 </button>
         <button class="border rounded-none btn border-border-light text-title hover:bg-info hover:text-white dark:border-border-dark dark:border sm:!p-2"> 2 </button>
         <button class="text-white border rounded-none btn btn-active border-border-light bg-info hover:bg-info hover:text-white dark:border-border-dark dark:border sm:!p-2"> 3 </button>
         <button class="border rounded-none btn border-border-light text-title hover:bg-primary hover:text-white dark:border-border-dark dark:border sm:!p-2"> 4 </button>
         <button class="border rounded-none btn border-border-light text-title hover:bg-primary hover:text-white dark:border-border-dark dark:border sm:!p-2"> 5 </button>
         <button class="border rounded-none btn border-border-light text-title hover:bg-primary hover:text-white dark:border-border-dark dark:border sm:!p-2"> 6 </button>
         <button class="border rounded-none btn border-border-light text-title hover:bg-primary hover:text-white dark:border-border-dark dark:border sm:!p-2"> 7 </button>
     </div>

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

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

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

Hand crafted & made with

Customizer

Template Mode
Choose template mode dark & light
Layout Type
Choose layout Ltr & Rtl
Monochrome Mode

Pagination

Unique Dashboard

Ecommerce Dashboard

Pagination

Disabled

Forward-Backward

Preview-Next

Rounded

With Icon

Sizes

Pagination Alignment

Template Mode

Layout Type

Notification

Dmitriy Groshev

Sufiya Elija

Janis Evans

Mukrani Pabelo

Josephin Water

Janis Evans

Sufiya Elija

Messages

New Review Receive

Transaction $250 Success

Order Place Success

Netflix Subscription Expires

Congratulations You Won $2500

Latest Updates On You Phone

Cart Items(25)

Flower Pot

Iphone Max pro

Royal Party Glass

Water Proof Watch

Traveling Duffle Bag

Bag Total

Helen Walter

Unique Dashboard

Ecommerce Dashboard

Pagination

Disabled

Forward-Backward

Preview-Next

Rounded

With Icon

Sizes

Pagination Alignment

Template Mode

Layout Type