### fab

FAB (Floating Action Button) stays in the bottom corner of screen. It includes a focusable and accessible element with button role. Clicking or focusing it shows additional buttons (known as Speed Dial buttons) in a vertical arrangement or a flower shape (quarter circle)

[fab docs](https://daisyui.com/components/fab/)

#### Class names

- component: `fab`
- part: `fab-close`, `fab-main-action`
- modifier: `fab-flower`

#### Syntax

A single FAB in the corner of screen

```html
<div class="fab">
	<button class="btn btn-lg btn-circle">{IconOriginal}</button>
</div>
```

A FAB that opens a 3 other buttons in the corner of page vertically

```html
<div class="fab">
	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
	<button class="btn btn-lg btn-circle">{Icon1}</button>
	<button class="btn btn-lg btn-circle">{Icon2}</button>
	<button class="btn btn-lg btn-circle">{Icon3}</button>
</div>
```

A FAB that opens a 3 other buttons in the corner of page vertically and they have label text

```html
<div class="fab">
	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
	<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
	<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
	<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>
```

FAB with rectangle buttons. These are not circular buttons so they can have more content.

```html
<div class="fab">
	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
	<button class="btn btn-lg">{Label1}</button>
	<button class="btn btn-lg">{Label2}</button>
	<button class="btn btn-lg">{Label3}</button>
</div>
```

FAB with close button. When FAB is open, the original button is replaced with a close button

```html
<div class="fab">
	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
	<div class="fab-close">Close <span class="btn btn-circle btn-lg btn-error">×</span></div>
	<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
	<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
	<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>
```

FAB with Main Action button. When FAB is open, the original button is replaced with a main action button

```html
<div class="fab">
	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
	<div class="fab-main-action">
		{LabelMainAction}<button class="btn btn-circle btn-secondary btn-lg">{IconMainAction}</button>
	</div>
	<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
	<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
	<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>
```

FAB Flower. It opens the buttons in a flower shape (quarter circle) arrangement instead of vertical

```html
<div class="fab fab-flower">
	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
	<button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
	<button class="btn btn-lg btn-circle">{Icon1}</button>
	<button class="btn btn-lg btn-circle">{Icon2}</button>
	<button class="btn btn-lg btn-circle">{Icon3}</button>
</div>
```

FAB Flower with tooltips. There's no space for a text label in a quarter circle, so tooltips are used to indicate the button's function

```html
<div class="fab fab-flower">
	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
	<button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
	<div class="tooltip tooltip-left" data-tip="{Label1}">
		<button class="btn btn-lg btn-circle">{Icon1}</button>
	</div>
	<div class="tooltip tooltip-left" data-tip="{Label2}">
		<button class="btn btn-lg btn-circle">{Icon2}</button>
	</div>
	<div class="tooltip tooltip-left" data-tip="{Label3}">
		<button class="btn btn-lg btn-circle">{Icon3}</button>
	</div>
</div>
```

#### Rules

- {Icon\*} should be replaced with the appropriate icon for each button. SVG icons are recommended
- {IconOriginal} is the icon that we see before opening the FAB
- {IconMainAction} is the icon we see after opening the FAB
- {Icon1}, {Icon2}, {Icon3} are the icons for the additional buttons
- {Label\*} is the label text for each button