Floating Action Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- Extended FAB - Primary -->
<button class="flex items-center gap-2 px-5 py-3 bg-blue-600 text-white font-medium rounded-full shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
  </svg>
  <span>Create</span>
</button>

<!-- Extended FAB - Outline -->
<button class="flex items-center gap-2 px-5 py-3 bg-white text-blue-600 border-2 border-blue-600 font-medium rounded-full shadow-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
  </svg>
  <span>Upload</span>
</button>

<!-- Extended FAB - Success -->
<button class="flex items-center gap-2 px-5 py-3 bg-green-600 text-white font-medium rounded-full shadow-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
  </svg>
  <span>Download</span>
</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# Floating Action Button

Floating action buttons (FAB) for primary actions.

## Variants

| Variant | Description |
|---------|-------------|
| [Standard](./standard/) | Standard circular FABs |
| [Extended](./extended/) | FAB with icon and text |
| [Group](./group/) | Grouped FABs for multiple actions |

## Quick Start

```html
<!-- Standard FAB -->
<button class="p-4 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
  </svg>
</button>

<!-- Extended FAB -->
<button class="flex items-center gap-2 px-5 py-3 bg-blue-600 text-white font-medium rounded-full shadow-lg hover:bg-blue-700">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
  </svg>
  <span>Create</span>
</button>
```

## Related

- [Icon Button](../icon-button/) - Icon-only buttons
- [Animated Button](../animated-button/) - Animated buttons