FAB (Floating Action Button)

<!-- Bottom-right (default position) -->
<div class="fab fab-bottom-end">
  <button class="fab-btn">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  </button>
</div>

Requires: ux.min.css

<div class="fixed z-100 flex flex-col items-center right-6 bottom-6">
  <button class="flex items-center justify-center w-14 h-14 p-0 border-none rounded-full bg-primary text-primary-content shadow-lg cursor-pointer hover:scale-105 active:scale-95 transition-transform">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required for basic FAB
// For speed dial, toggle .is-open on the .fab container

<button class="fab-btn fab-btn-sm">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
</button>

<button class="fab-btn">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
</button>

<button class="fab-btn fab-btn-lg">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
</button>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <button class="flex items-center justify-center w-10 h-10 p-0 border-none rounded-full bg-primary text-primary-content shadow-lg cursor-pointer hover:scale-105 active:scale-95 transition-transform">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  </button>
  <button class="flex items-center justify-center w-14 h-14 p-0 border-none rounded-full bg-primary text-primary-content shadow-lg cursor-pointer hover:scale-105 active:scale-95 transition-transform">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  </button>
  <button class="flex items-center justify-center w-16 h-16 p-0 border-none rounded-full bg-primary text-primary-content shadow-lg cursor-pointer hover:scale-105 active:scale-95 transition-transform">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required

<button class="fab-btn fab-btn-extended color-primary">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  <span class="fab-btn-label">New Item</span>
</button>

Requires: ux.min.css

<button class="inline-flex items-center gap-2 h-12 px-5 pl-4 rounded-3xl bg-primary text-primary-content shadow-lg border-none cursor-pointer font-semibold text-sm hover:scale-105 active:scale-95 transition-transform">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  <span>New Item</span>
</button>

Requires: tw.min.css

// No JavaScript required

<div class="fab fab-bottom-end is-open">
  <div class="fab-list">
    <div class="fab-list-item">
      <span class="fab-list-label">Edit</span>
      <button class="fab-mini-btn color-primary">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>
      </button>
    </div>
    <div class="fab-list-item">
      <span class="fab-list-label">Share</span>
      <button class="fab-mini-btn color-success">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
      </button>
    </div>
  </div>
  <button class="fab-btn">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  </button>
</div>

Requires: ux.min.css

<div class="relative flex flex-col items-center gap-3">
  <!-- Speed dial items (visible when open) -->
  <div class="flex flex-col items-center gap-3 mb-2">
    <div class="flex items-center gap-3">
      <span class="px-3 py-1.5 bg-base-100 text-sm rounded-lg shadow-md whitespace-nowrap">Edit</span>
      <button class="flex items-center justify-center w-10 h-10 p-0 border-none rounded-full bg-primary text-primary-content shadow-md cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>
      </button>
    </div>
    <div class="flex items-center gap-3">
      <span class="px-3 py-1.5 bg-base-100 text-sm rounded-lg shadow-md whitespace-nowrap">Share</span>
      <button class="flex items-center justify-center w-10 h-10 p-0 border-none rounded-full bg-success text-success-content shadow-md cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
      </button>
    </div>
  </div>
  <!-- Main FAB -->
  <button class="flex items-center justify-center w-14 h-14 p-0 border-none rounded-full bg-primary text-primary-content shadow-lg cursor-pointer hover:scale-105 active:scale-95 transition-transform">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  </button>
</div>

Requires: tw.min.css

// Toggle speed dial
const fab = document.querySelector('.fab');
const fabBtn = fab.querySelector('.fab-btn');
fabBtn.addEventListener('click', () => {
  fab.classList.toggle('is-open');
});