benjaminpalko/.opencode/skills/daisyui/components/fab.md

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

Class names

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

Syntax

A single FAB in the corner of screen

<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

<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

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

<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

<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

<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

<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

<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