Django FAB / Speed Dial Component

The relative and absolute positioning classes (along with bottom-4 right-4) shown in the examples below are only added for the previewer to demonstrate the FAB components within a contained area. By default, FAB components are positioned relative to the screen/viewport and don't require these positioning classes in actual usage.

Basic FAB

Preview

Code

<div class="relative h-72">
    <c-lb.fab variant="primary" size="lg" class="absolute bottom-4 right-4" label="F">
        <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">C</c-lb.button>
    </c-lb.fab>
</div>

Screen Corner

Preview

Look at the screen corner bottom right.

Code

<p class="text-sm text-gray-600 mb-4">Look at the screen corner bottom right.</p>

<c-lb.fab variant="primary" size="lg" label="B">
    <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button>
    <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button>
    <c-lb.button variant="neutral" size="lg" modifier="circle">L</c-lb.button>
</c-lb.fab>

FAB with Icons

Preview

Code

<div class="relative h-72">
    <c-lb.fab variant="secondary" size="lg" icon="rmx.add" class="absolute bottom-4 right-4">
        <c-lb.button variant="neutral" size="lg" modifier="circle">
            <c-lbi n="rmx.camera" w="1em" h="1em" />
        </c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">
            <c-lbi n="rmx.image" w="1em" h="1em" />
        </c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">
            <c-lbi n="rmx.mic" w="1em" h="1em" />
        </c-lb.button>
    </c-lb.fab>
</div>

FAB with Labels

Preview

Label B

Label C

Label D

Code

<div class="relative h-72">
    <c-lb.fab variant="success" size="lg" class="absolute bottom-4 right-4" label="F">
        <div>Label B <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button></div>
        <div>Label C <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button></div>
        <div>Label D <c-lb.button variant="neutral" size="lg" modifier="circle">C</c-lb.button></div>
    </c-lb.fab>
</div>

Flower Mode

Preview

Code

<div class="relative h-72">
    <c-lb.fab variant="success" size="lg" flower class="absolute bottom-4 right-4" label="F">
        <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">C</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">D</c-lb.button>
    </c-lb.fab>
</div>

FAB with Close Button

Preview

Label A

Label B

Label C

Code

<div class="relative h-72">
    <c-lb.fab variant="info" size="lg" class="absolute bottom-4 right-4" label="F">
        <c-lb.fab.close variant="error" />
        <div>Label A <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button></div>
        <div>Label B <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button></div>
        <div>Label C <c-lb.button variant="neutral" size="lg" modifier="circle">C</c-lb.button></div>
    </c-lb.fab>
</div>

FAB with Main Action

Preview

Label A

Label B

Label C

Code

<div class="relative h-72">
    <c-lb.fab variant="primary" size="lg" class="absolute bottom-4 right-4" label="F">
        <c-lb.fab.main-action variant="secondary">M</c-lb.fab.main-action>
        <div>Label A <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button></div>
        <div>Label B <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button></div>
        <div>Label C <c-lb.button variant="neutral" size="lg" modifier="circle">C</c-lb.button></div>
    </c-lb.fab>
</div>

Close Button Only

Preview

Code

<div class="relative h-72">
    <c-lb.fab variant="warning" size="lg" class="absolute bottom-4 right-4" label="F">
        <c-lb.fab.close variant="error" />
    </c-lb.fab>
</div>

Close Button with Custom Content

Preview

Label A

Label B

Label C

Code

<div class="relative h-72">
    <c-lb.fab variant="info" size="lg" class="absolute bottom-4 right-4" label="F">
        <c-lb.fab.close variant="error">×</c-lb.fab.close>
        <div>Label A <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button></div>
        <div>Label B <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button></div>
        <div>Label C <c-lb.button variant="neutral" size="lg" modifier="circle">C</c-lb.button></div>
    </c-lb.fab>
</div>

Main Action Only

Preview

Code

<div class="relative h-72">
    <c-lb.fab variant="success" size="lg" class="absolute bottom-4 right-4" label="F">
        <c-lb.fab.main-action variant="secondary">M</c-lb.fab.main-action>
    </c-lb.fab>
</div>

Main Action with Custom Content

Preview

Label A

Label B

Label C

Code

<div class="relative h-72">
    <c-lb.fab variant="primary" size="lg" class="absolute bottom-4 right-4" label="F">
        <c-lb.fab.main-action variant="secondary">M</c-lb.fab.main-action>
        <div>Label A <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button></div>
        <div>Label B <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button></div>
        <div>Label C <c-lb.button variant="neutral" size="lg" modifier="circle">C</c-lb.button></div>
    </c-lb.fab>
</div>

Custom Button

Preview

Code

<div class="relative h-72">
    <c-lb.fab variant="primary" size="lg" class="absolute bottom-4 right-4">
        <div tabindex="0" role="button" class="btn btn-circle btn-primary btn-lg">
            <c-lbi.rmx.settings w="1em" h="1em" />
        </div>
        <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">C</c-lb.button>
    </c-lb.fab>
</div>

Custom Styled Button

Preview

⚡

Code

<div class="relative h-72">
    <c-lb.fab variant="primary" size="lg" class="absolute bottom-4 right-4">
        <div tabindex="0" role="button" class="btn btn-circle btn-accent btn-lg animate-pulse">
            <span class="text-2xl">⚡</span>
        </div>
        <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">C</c-lb.button>
    </c-lb.fab>
</div>

Label with HTML

Preview

Code

<div class="relative h-72">
    <c-lb.fab variant="primary" size="lg" class="absolute bottom-4 right-4">
        <c-slot name="label">
            <span class="text-warning">F</span>
        </c-slot>
        <c-lb.button variant="neutral" size="lg" modifier="circle">A</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">B</c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">C</c-lb.button>
    </c-lb.fab>
</div>

Flower Mode with Icons

Preview

Code

<div class="relative h-72">
    <c-lb.fab variant="info" size="lg" flower icon="rmx.add" class="absolute bottom-4 right-4">
        <c-lb.button variant="neutral" size="lg" modifier="circle">
            <c-lbi n="rmx.camera" w="1em" h="1em" />
        </c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">
            <c-lbi n="rmx.image" w="1em" h="1em" />
        </c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">
            <c-lbi n="rmx.mic" w="1em" h="1em" />
        </c-lb.button>
        <c-lb.button variant="neutral" size="lg" modifier="circle">
            <c-lbi n="rmx.upload" w="1em" h="1em" />
        </c-lb.button>
    </c-lb.fab>
</div>

Single Button FAB

Preview

Code

<div class="relative h-72">
    <c-lb.fab variant="primary" size="lg" class="absolute bottom-4 right-4" label="F">
    </c-lb.fab>
</div>

API Reference

`c-lb.fab`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
variant	neutral primary secondary accent info success warning error	-	No	FAB color variant
size	xs sm md lg xl	`lg`	No	FAB button size
flower	boolean	`False`	No	Enable flower (quarter circle) arrangement instead of vertical
icon	string	-	No	Icon name to display
↳ .fill	modifier	-	No	Render in filled (solid) style
icon.class	string	-	No	Additional CSS classes for the icon
label	string	-	No	Text label for the main button (alternative to icon)

Slot Name	Description
default	Speed dial action buttons (main slot content)
label	Custom HTML content for the main button label (goes inside the existing button div - for rich text, icons, etc.)

`c-lb.fab.close`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
variant	neutral primary secondary accent info success warning error	`error`	No	Close button color variant
size	xs sm md lg xl	`lg`	No	Close button size

Slot Name	Description
default	Custom content for the close button (defaults to ✕ if not provided)

`c-lb.fab.main-action`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
variant	neutral primary secondary accent info success warning error	`secondary`	No	Main action button color variant
size	xs sm md lg xl	`lg`	No	Main action button size

Slot Name	Description
default	Custom content for the main action button