##### Recently Browses

- Apps Api
- Dashboard Marketing

##### Memebers

- Ethan Smith Backend Developer
- Isabella Garcia Digital Marketer
- Noah Walker Full Stack Developer

##### Filters

- customers:
  All customers list
- products:
  Bestselling products
- events:
  All upcoming events

## Button

1. Home
3. Components
5. Button

##### Variant

    <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>

##### Sizing

    <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>

##### Icon

Icon only with tooltip

    <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>

##### Shapes

    <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>

##### Group

    <!--: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-zinc-200 shadow-xs dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-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-zinc-200 shadow-xs dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-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-zinc-200 shadow-xs dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-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-zinc-200 shadow-xs dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800">
            <span class="icon-[lucide--forward] text-lg">forward</span>
        </button>
    </div>