<div className="ti-btn-list space-x-2 rtl:space-x-reverse">
{Defaultbutton.map((idx)=>(<button type="button" className={a&#768;ti-btn ti-btn-&#36;
    {idx.color} ti-btn-wavea&#769;} key={Math.random()}>{idx.class}</button>))}
<button type="button" className="ti-btn ti-btn-link ti-btn-wave">Link
</button>
</div>

<div className="ti-btn-list space-x-2 rtl:space-x-reverse">
{Defaultbutton.map((idx)=>(<button type="button" 
className={a&#768;ti-btn ti-btn-&#36;{idx.color} 
!rounded-full ti-btn-wavea&#769;} key={Math.random()}>
{idx.class}</button>))}<button type="button"
 className="ti-btn ti-btn-link ti-btn-wave">Link
</button>
</div>

<div className="ti-btn-list space-x-2 rtl:space-x-reverse">
{Lightbuttons.map((idx)=>(<button type="button" 
className={a&#768;ti-btn ti-btn-&#36;{idx.color}
ti-btn-wavea&#769;} key={Math.random()}>{idx.class}
</button>))}</div>

<div className="ti-btn-list space-x-2 
rtl:space-x-reverse">{Lightbuttons.map((idx)=>( <button type="button" 
className={a&#768;ti-btn ti-btn-&#36;{idx.color} !rounded-full 
ti-btn-wavea&#769;} key={Math.random()}>
{idx.class}</button>))}
</div>

<div className="ti-btn-list space-x-2 
rtl:space-x-reverse">{outlinebuttons.map((idx)=>
(}<button type="button" className={a&#768;ti-btn 
ti-btn-outline-&#36;{idx.color} ti-btn-wavea&#769;} 
key={Math.random()}>{idx.class}</button>))}
</div>

<div className="ti-btn-list space-x-2 
rtl:space-x-reverse">{outlinebuttons.map((idx)=>(
<button type="button" className={a&#768;ti-btn 
ti-btn-outline-&#36;{idx.color} !rounded-full 
ti-btn-wavea&#769;} key={Math.random()}>{idx.class}
</button>))}
</div>

<div className="ti-btn-list space-x-2 
rtl:space-x-reverse">{gradientbuttons.map((idx)=>(
<button type="button" className={a&#768;ti-btn 
ti-btn-&#36;{idx.color}-gradient ti-btn-wavea&#769;} 
key={Math.random()}>{idx.class}</button>))}</div>

<div 
className="ti-btn-list space-x-2 rtl:space-x-reverse">
{gradientbuttons.map((idx)=>(
<button type="button" className={a&#768;ti-btn ti-btn-&#36;
{idx.color}-gradient !rounded-full ti-btn-wavea&#769;}
key={Math.random()}>{idx.class}</button>))}</div>

<div className="ti-btn-list 
space-x-2 rtl:space-x-reverse">
{gradientbuttons.map((idx)=>(<button type="button" 
className={a&#768;ti-btn ti-btn-ghost-&#36;{idx.color} 
ti-btn-wavea&#769;} key={Math.random()}>{idx.class}</button>))}
</div>

<div 
className="ti-btn-list space-x-2 rtl:space-x-reverse">
{gradientbuttons.map((idx)=>(<button type="button" 
className={a&#768;ti-btn ti-btn-ghost-&#36;{idx.color} 
!rounded-full ti-btn-wavea&#769;} key={Math.random()}>
{idx.class}</button>))}
</div>

<div className="ti-btn-list space-x-2
 rtl:space-x-reverse">
 <Link className="ti-btn ti-btn-primary-full ti-btn-wave" href="#">
 Link</Link><button className="ti-btn ti-btn-secondary-full 
 ti-btn-wave" type="submit">Button</button>
<input className="ti-btn ti-btn-info-full" type="button"
 value="Input" />
<input className="ti-btn ti-btn-warning-full" type="button" 
value="Submit" /><input className="ti-btn ti-btn-success-full" 
type="button" value="Reset" />
</div>

<div className="ti-btn-list flex">
<div className="mb-4">
<button type="button" className="ti-btn ti-btn-primary-full 
ti-btn-disabled">Primary button</button><button type="button"
 className="ti-btn ti-btn-secondary-full ti-btn-disabled">
 Button</button>
 <button type="button" 
 className="ti-btn ti-btn-outline-primary ti-btn-disabled">
 Primary button</button><button type="button" 
 className="ti-btn ti-btn-outline-secondary ti-btn-disabled">
 Button</button>
 </div>
 <div>
 <Link href="#" className="ti-btn ti-btn-primary ti-btn-disabled" 
 aria-disabled="true">Primary link</Link><Link href="#"
  className="ti-btn ti-btn-secondary ti-btn-disabled" 
  aria-disabled="true">
Link
</Link>
</div>
</div>

<div className="ti-btn-list md:flex flex-wrap">
<button type="button" 
className="ti-btn ti-btn-primary-full ti-btn-loader m-2">
<span className="me-2">Loading</span>
<span className="loading">
<i className="ri-loader-2-fill text-[1rem] animate-spin">
</i></span>
</button>
<button type="button" className="ti-btn ti-btn-outline-secondary
 ti-btn-loader m-2"><span className="me-2">Loading</span>
 <span className="loading">
 <i className="ri-loader-2-fill text-[1rem] animate-spin">
 </i>
 </span>
 </button>
 <button type="button" className="ti-btn bg-info/10 
 text-info ti-btn-loader m-2">
 <span className="me-2">
 Loading</span><span className="loading">
 <i className="ri-loader-4-line text-[1rem] 
 animate-spin"></i></span></button>
 <button type="button" className="ti-btn bg-warning/10 
 text-warning ti-btn-loader m-2">
 <span className="me-2">Loading</span>
 <span className="loading">
 <i className="ri-loader-5-line text-[1rem]
  animate-spin"></i></span>
  </button>
  <button type="button" 
  className="ti-btn ti-btn-success-full ti-btn-loader 
  ti-btn-disabled m-2">
  <span className="me-2">
  Disabled</span>
  <span className="loading">
  <i className="ri-refresh-line text-[1rem]
   animate-spin"></i></span>
   </button>
   </div>

<div className="ti-btn-list md:flex block">
<div className="md:mb-0 mb-2">
<button type="button" aria-label="button"
 className="ti-btn ti-btn-icon ti-btn-primary-full ti-btn-wave"> 
 <i className="ri-bank-fill"></i></button>
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon ti-btn-info-full ti-btn-wave">
 <i className="ri-medal-line"></i></button>
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon ti-btn-danger-full ti-btn-wave">
 <i className="ri-archive-line"></i></button>
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon ti-btn-warning-full ti-btn-wave me-5">
 <i className="ri-calendar-2-line"></i></button>
 </div>
 <div className="md:mb-0 mb-2">
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon bg-primary/10 text-primary 
 !border hover:bg-primary hover:text-white !rounded-full 
 ti-btn-wave"><i className="ri-home-smile-line"></i></button>
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon bg-secondary/10 text-secondary 
 hover:bg-secondary hover:text-white !rounded-full ti-btn-wave">
 <i className="ri-delete-bin-line"></i></button>
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon bg-success/10 text-success hover:bg-success
  hover:text-white !rounded-full ti-btn-wave">
<i className="ri-notification-3-line"></i></button>
<button type="button" aria-label="button" 
className="ti-btn ti-btn-icon bg-danger/10 text-danger 
hover:bg-danger hover:text-white !rounded-full ti-btn-wave me-5">
<i className="ri-chat-settings-line"></i></button>
</div>
<div className="">
<button type="button" aria-label="button" 
className="ti-btn ti-btn-icon ti-btn-outline-primary 
!rounded-full ti-btn-wave">
<i className="ri-phone-line">
</i></button><button type="button" aria-label="button"
 className="ti-btn ti-btn-icon ti-btn-outline-teal 
 !border-teal !text-teal !rounded-full ti-btn-wave">
 <i className="ri-customer-service-2-line"></i></button>
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon ti-btn-outline-success 
 !rounded-full ti-btn-wave"><i className="ri-live-line"></i>
 </button><button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon ti-btn-outline-secondary 
 !rounded-full ti-btn-wave"><i className="ri-save-line">
 </i>
 </button>
 </div>
 </div>

<div className="ti-btn-list space-x-2 rtl:space-x-reverse">
<button type="button" aria-label="button" 
className="ti-btn ti-btn-icon ti-btn-facebook ti-btn-wave">
<i className="ri-facebook-line"></i>
</button>
<button type="button" aria-label="button" className="ti-btn ti-btn-icon
 ti-btn-twitter ti-btn-wave">
 <i className="ri-twitter-line"></i>
 </button>
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon ti-btn-instagram ti-btn-wave">
 <i className="ri-instagram-line"></i</button>
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon ti-btn-github 
 ti-btn-wave"><i className="ri-github-line"></i>
 </button>
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon ti-btn-youtube ti-btn-wave">
 <i className="ri-youtube-line"></i></button>
 <button type="button" aria-label="button" 
 className="ti-btn ti-btn-icon ti-btn-google ti-btn-wave">
 <i className="ri-google-line"></i>
 </button>
 </div>

<div className="ti-btn-list flex">
<div className="me-[3rem]">
<button type="button" className="ti-btn ti-btn-primary-full shadow-sm ti-btn-wave">
Button</button><button type="button" className="ti-btn ti-btn-primary-full shadow
 ti-btn-wave">Button</button><button type="button" 
 className="ti-btn ti-btn-primary-full shadow-lg ti-btn-wave">Button</button>
 </div>
 <div>
 <button type="button" 
 className="ti-btn ti-btn-secondary-full !py-1 !px-2 shadow-sm ti-btn-wave">Button
 </button>
 <button type="button" className="ti-btn ti-btn-info-full shadow ti-btn-wave">
 Button</button>
 <button type="button" className="ti-btn ti-btn-lg ti-btn-success-full 
 shadow-lg ti-btn-wave">Button
 </button>
 </div>
 </div>

<div className="ti-btn-list space-x-2 rtl:space-x-reverse">
<button type="button" className="ti-btn ti-btn-primary-full shadow-primary ti-btn-wave">
Button</button>
<button type="button" className="ti-btn ti-btn-secondary-full shadow-secondary ti-btn-wave">
Button</button>
<button type="button" className="ti-btn ti-btn-success-full shadow-success ti-btn-wave">Button
</button>
<button type="button" className="ti-btn ti-btn-info-full shadow-info ti-btn-wave">Button
</button>
<button type="button" className="ti-btn ti-btn-warning-full shadow-warning ti-btn-wave">
Button</button>
<button type="button" className="ti-btn ti-btn-danger-full shadow-danger ti-btn-wave">Button
</button>
<button type="button" className="ti-btn ti-btn-purple-full shadow-purple ti-btn-wave">Button
</button>
<button type="button" className="ti-btn ti-btn-orange-full shadow-orange ti-btn-wave">Button
</button>
</div>

<div className="ti-btn-list space-x-2 rtl:space-x-reverse">
<button type="button" className="ti-btn ti-btn-primary-full label-ti-btn">
<i className="ri-chat-smile-line label-ti-btn-icon  me-2"></i>Primary</button>
<button type="button" className="ti-btn ti-btn-secondary-full label-ti-btn">
<i className="ri-settings-4-line label-ti-btn-icon me-2"></i>Secondary</button>
<button type="button" className="ti-btn ti-btn-warning-full label-ti-btn 
!rounded-full"><i className="ri-spam-2-line label-ti-btn-icon me-2 !rounded-full">
</i>Warning
</button>
<button type="button" className="ti-btn ti-btn-info-full label-ti-btn !rounded-full">
<i className="ri-phone-line label-ti-btn-icon me-2 !rounded-full"></i>Info</button>
<button type="button" className="ti-btn ti-btn-success-full label-ti-btn label-end">
<i className="ri-thumb-up-line label-ti-btn-icon ms-2"></i>Success </button>
<button type="button" className="ti-btn ti-btn-danger-full label-ti-btn label-end
 !rounded-full"><i className="ri-close-line label-ti-btn-icon ms-2 !rounded-full">
 </i>Cancel
 </button>
 </div>

<div className="ti-btn-list space-x-2 rtl:space-x-reverse">
<button type="button" className="ti-btn ti-btn-info-full custom-button !rounded-full">
<span className="custom-ti-btn-icons">
<i className="ri-twitter-line text-info"></i>
</span>Twitter
</button>
<button type="button" className="ti-btn ti-btn-teal ti-btn-border-down border-0">
Border</button>
<button type="button" className="ti-btn ti-btn-secondary ti-btn-border-start">
Border</button>
<button type="button" className="ti-btn ti-btn-purple ti-btn-border-end">Border
</button>
<button type="button" className="ti-btn ti-btn-warning ti-btn-border-top">
Border
</button>
<button type="button" className="ti-btn ti-btn-danger-full ti-btn-hover 
ti-btn-hover-animate">Like</button>
<button type="button" className="ti-btn ti-btn-success-full ti-btn-darken-hover">
Hover</button>
<button type="button" className="ti-btn ti-btn-orange-full ti-btn-custom-border">
Hover
</button>
</div>

<div className="ti-btn-list space-x-2 rtl:space-x-reverse">
<div className="grid  gap-2 mb-6">
<button className="ti-btn ti-btn-primary-full ti-btn-wave" type="button">
Button
</button>
<button className="ti-btn ti-btn-secondary-full ti-btn-wave" type="button">
Button
</button>
</div>
<div className="grid gap-2 md:block">
<button className="ti-btn ti-btn-info-full ti-btn-wave" 
type="button">Button
</button>
<button className="ti-btn ti-btn-success-full ti-btn-wave" type="button">Button
</button>
</div>
<div className="grid !mx-auto gap-2 w-[50%] ">
<button className="ti-btn ti-btn-danger-full ti-btn-wave" type="button">
Button</button>
<button className="ti-btn ti-btn-warning-full ti-btn-wave" type="button">
Button
</button>
</div>
<div className="grid gap-2 md:flex md:justify-end">
<button className="ti-btn ti-btn-teal-full md:me-2 ti-btn-wave" 
type="button">Button</button>
<button className="ti-btn ti-btn-purple-full ti-btn-wave" type="button">
Button
</button>
</div>
</div>