<button class="btn btn-default"> Default </button>

<button class="btn flex items-center justify-center bg-primary hover:bg-primary-deep text-white">
 Fill button
</button>

<button class="btn text-current hover:text-primary">
 Flat
</button>

<button class="btn btn-default disabled:opacity-60 disabled:pointer-events-none" disabled>
    Disabled
</button>
<button class="btn bg-primary hover:bg-primary-deep text-white disabled:opacity-60 disabled:pointer-events-none"
    disabled>
    Disabled
</button>

<button class="btn btn-sm bg-primary hover:bg-primary-deep text-white">
 Small
</button>

<button class="btn bg-primary hover:bg-primary-deep text-white">
 Default
</button>

<button class="btn btn-lg bg-primary hover:bg-primary-deep text-white">
 Large
</button>

<button class="btn bg-primary w-full hover:bg-primary-deep text-white">
  Block level
</button>

<button class="btn btn-default">
 <span class="icon-[lucide--component] text-lg me-2"></span> Explore Apps
</button>

<button class="btn btn-default">
 <span class="icon-[lucide--component] text-lg ms-2 order-last"></span> Explore Apps
</button>

<button class="btn btn-default" data-bs-toggle="tooltip" data-bs-title="Explore Apps">
  <span class="icon-[lucide--component] text-xl"> </span>
</button>

<button class="btn btn-default !rounded-full !px-4">
 Radius full
</button>

<button class="btn btn-default !rounded-none">
 Radius none
</button>

<button class="btn btn-default !rounded-tl-2xl !rounded-br-2xl">
 Radius Custom
</button>

<!--:Button group:-->
<div class="flex items-center" role="group">
    <button data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Move to Trash" type="button"
        class="size-8 flex items-center justify-center cursor-pointer rounded-s-lg border border-e-0 border-stone-200 shadow-xs dark:border-stone-700 hover:bg-stone-50 dark:hover:bg-stone-800">
        <span class="icon-[lucide--trash] text-lg"></span>
    </button>
    <button data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Move to Archive" type="button"
        class="size-8 flex items-center justify-center cursor-pointer border border-e-0 border-stone-200 shadow-xs dark:border-stone-700 hover:bg-stone-50 dark:hover:bg-stone-800">
        <span class="icon-[lucide--archive] text-lg"></span>
    </button>
    <button data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Mark all as read" type="button"
        class="size-8 flex items-center justify-center cursor-pointer border border-stone-200 shadow-xs dark:border-stone-700 hover:bg-stone-50 dark:hover:bg-stone-800">
        <span class="icon-[lucide--mail-open] text-lg"></span>
    </button>
    <button data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Forward" type="button"
        class="size-8 flex items-center justify-center cursor-pointer border-s-0 border rounded-e-lg border-stone-200 shadow-xs dark:border-stone-700 hover:bg-stone-50 dark:hover:bg-stone-800">
        <span class="icon-[lucide--forward] text-lg">forward</span>
    </button>
</div>