Floating Action Button Extended

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
36
37
38
39
40
41
42

# Floating Action Button Extended

Extended FAB with icon + label.

## Preview

Open `preview.html` for a standalone demonstration of this variant.

## Features

- Extended (icon + text) floating action treatment
- Elevation / shadow
- Focus-visible states

## Usage

```bash
npx devsnips add Tailwind/Components/Buttons/floating-action-button/extended
```

Copy from `code.html`. Position fixed/absolute as needed in your layout.

## Customization

- Colors, shadow, radius
- Icon and label spacing

## Accessibility

- Native `<button>` with a clear accessible name
- Focus-visible styles

## Dependencies

- Tailwind CSS only

## File Structure

- `code.html` — copy/paste snippet
- `preview.html` — standalone demo
- `metadata.json` — metadata
- `README.md` — this file