<div class="flex flex-wrap gap-2"> 
   <button class="btn btn-primary text-white">Primary</button> 
   <button class="btn btn-secondary text-white">Secondary</button>
   <button class="btn btn-info text-white">Info</button> 
   <button class="btn btn-success text-white">Success</button> 
   <button class="btn btn-warning text-white">Warning</button> 
   <button class="btn btn-danger text-white">Danger</button>
   <button class="btn btn-light text-title">Light</button> 
</div> 

  <div class="flex flex-wrap gap-2"> 
   <button class="btn btn-active btn-primary text-white">Primary</button> 
   <button class="btn btn-active btn-secondary text-white">Secondary</button>
   <button class="btn btn-active btn-info text-white">Info</button> 
   <button class="btn btn-active btn-success text-white">Success</button> 
   <button class="btn btn-active btn-warning text-white">Warning</button> 
   <button class="btn btn-active btn-danger text-white">Danger</button>
   <button class="btn btn-active btn-light text-title">Light</button> 
</div>

  <div class="flex flex-wrap gap-2">  
   <button class="btn btn-outline btn-primary">Primary</button> 
   <button class="btn btn-outline btn-secondary">Secondary</button>
   <button class="btn btn-outline btn-info">Info</button> 
   <button class="btn btn-outline btn-success">Success</button> 
   <button class="btn btn-outline btn-warning">Warning</button> 
   <button class="btn btn-outline btn-danger">Danger</button>
   <button class="btn btn-outline btn-light">Light</button> 
</div>

  <div class="flex flex-wrap gap-2">  
   <button class="btn btn-flat btn-primary">Primary</button> 
   <button class="btn btn-flat btn-secondary">Secondary</button>
   <button class="btn btn-flat btn-info">Info</button> 
   <button class="btn btn-flat btn-success">Success</button> 
   <button class="btn btn-flat btn-warning">Warning</button> 
   <button class="btn btn-flat btn-danger">Danger</button>
   <button class="btn btn-flat btn-light">Light</button> 
</div>               

         <div class="flex flex-wrap gap-2">  
   <button class="btn btn-rounded btn-primary">Primary</button> 
   <button class="btn btn-rounded btn-secondary">Secondary</button>
   <button class="btn btn-rounded btn-info">Info</button> 
   <button class="btn btn-rounded btn-success">Success</button> 
   <button class="btn btn-rounded btn-warning">Warning</button> 
   <button class="btn btn-rounded btn-danger">Danger</button>
   <button class="btn btn-rounded btn-light">Light</button> 
</div>

  <div class="flex flex-wrap gap-2"> 
   <a class="btn btn-primary text-white" href="javascript:void(0)" role="button">Link</a> 
   <button class="btn btn-secondary text-white">Button</button>
   <input class="btn btn-info text-white" type="submit" value="Submit">
   <input class="btn btn-success text-white" type="button" value="Button">
   <input class="btn btn-warning text-white" type="reset" value="Reset">
</div>

  <div class="flex flex-wrap gap-2"> 
   <button class="btn btn-outline btn-primary btn-xs.text-primary">Ex-small</button>
   <button class="btn btn-outline btn-secondary btn-sm.text-primary">Small</button>
   <button class="btn btn-outline btn-info btn-md.text-primary">Medium</button> 
   <button class="btn btn-outline btn-success btn-lg.text-primary">Large</button>
</div>

  <div class="flex flex-wrap gap-2"> 
   <button class="btn btn-warning btn-rounded h-14 w-14">X</button> 
   <button class="btn btn-outline btn-warning btn-rounded h-14 w-14">X</button>
   <button class="btn btn-success btn-square h-14 w-14">X</button>
   <button class="btn btn-outline btn-success btn-square h-14 w-14">X</button>
</div>

  <div class="flex flex-wrap gap-2"> 
   <button class="btn btn-primary" disabled="disabled">disabled attribute</button> 
   <button class="btn btn-secondary btn-disabled">disabled class</button>
</div>

  <div class="flex flex-wrap gap-2"> 
   <button class="btn btn-secondary text-white flex justify-center items-center gap-2">
      +SVG_ICON("Heart","w-[18px] h-[18px] fill-none stroke-white")Likes
   </button> 
   <button class="btn btn-secondary text-white flex justify-center items-center gap-2">
      +SVG_ICON("Heart","w-[18px] h-[18px] fill-none stroke-white")Wishlist
   </button>

  <div class="flex flex-wrap gap-2">
   <button class="btn btn-primary">
     <div role="status">
       <svg class="w-5 h-5 text-gray-200 animate-spin fill-primary"></svg>
       <span class="sr-only"></span>
     </div>
   </button>
   <button class="btn btn-success btn-square">
     <div role="status">
       <svg class="mr-2 w-5 h-5 text-gray-200 animate-spin fill-primary"></svg>
       <span class="sr-only"></span>
     </div>
   </button>
   <button class="btn btn-success btn-square">
     <div role="status">
       <svg class="mr-2 w-5 h-5 text-gray-200 animate-spin fill-white"></svg>
       <span class="sr-only"></span>
     </div>
   </button>
</div>

  <div class="flex flex-wrap gap-2">
   <button class="btn btn-primary block w-full text-white">Button block</button>
</div>

  <div class="flex flex-wrap gap-2">
   <button class="py-2 px-3 text-sm font-medium text-white bg-primary rounded-none border hover:bg-primary hover:text-white focus:text-white focus:bg-primary">Profile</button>
   <button class="py-2 px-3 text-sm font-medium bg-white rounded-none border hover:bg-primary hover:text-white focus:text-white focus:bg-primary">Setting</button>
   <button class="py-2 px-3 text-sm font-medium bg-white rounded-none border hover:bg-primary hover:text-white focus:text-white focus:bg-primary">Message</button>
</div>