FAB / Speed Dial

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 with up to 4 buttons).

Base FAB Components

The base FAB components:

Exported source 
fab = SingleValueFactory("fab", "Fab container element. It includes a focusable div and when it gets clicked of focused, it shows more floating buttons ") # Fab container element
fab_close = SingleValueFactory("fab-close", "Optional class for a close button (or a wrapper of a close button) ") # Fab close part
fab_main_action = SingleValueFactory("fab-main-action", "Optional class for the main action button (or a wrapper of the main action button). Either use fab-close or fab-main-action, not both ") # FAB main action part

FAB Modifiers

FAB modifier utilities:

Exported source 
fab_modifiers = SimpleFactory(
    {
        "flower": "fab-flower",
    },
    "FAB modifiers"
) # FAB modifiers

FAB Test Examples

source

test_fab_basic_examples

 test_fab_basic_examples ()

Test basic FAB utilities.

Exported source 
def test_fab_basic_examples():
    """Test basic FAB utilities."""
    # Basic FAB
    assert str(fab) == "fab"
    
    # Test with modifiers
    assert str(fab.hover) == "hover:fab"
    assert str(fab.md) == "md:fab"
    assert str(fab.dark) == "dark:fab"

# Run the tests
test_fab_basic_examples()

source

test_fab_modifiers_examples

 test_fab_modifiers_examples ()

Test button FAB utilities.

Exported source 
def test_fab_modifiers_examples():
    """Test button FAB utilities."""
    assert str(fab_modifiers.flower) == "fab-flower"

# Run the tests
test_fab_modifiers_examples()

source

test_fab_basic_fasthtml_examples

 test_fab_basic_fasthtml_examples ()

Test basic FAB examples from daisyUI v5 documentation.

Exported source 
def test_fab_basic_fasthtml_examples():
    """Test basic FAB examples from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers, btn_colors
    from cjm_fasthtml_tailwind.utilities.sizing import min_h

    vertical_fab = Div(
        Div("F", tabindex="0", role="button", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.primary)),
        Button("A", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button("B", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button("C", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        cls=combine_classes(fab)
    )
    assert vertical_fab.attrs['class'] == "fab"
    
    
    # Return all elements in a Div
    return Div(
        vertical_fab,
        cls=combine_classes(min_h(50))
    )

# Run the tests
test_fab_basic_fasthtml_examples()
<div class="min-h-50">
  <div class="fab">
    <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">F</div>
<button class="btn btn-lg btn-circle">A</button><button class="btn btn-lg btn-circle">B</button><button class="btn btn-lg btn-circle">C</button>  </div>
</div>
test_func = test_fab_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_fab_with_svgs_fasthtml_examples

 test_fab_with_svgs_fasthtml_examples ()

Test FAB with SVG icons from daisyUI v5 documentation.

Exported source 
def test_fab_with_svgs_fasthtml_examples():
    """Test FAB with SVG icons from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers, btn_colors
    from cjm_fasthtml_tailwind.utilities.sizing import min_h

    from fasthtml.svg import Svg, Path

    # 1. Plus/New icon (for main FAB button)
    plus_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            d="M12 4.5v15m7.5-7.5h-15"
        ),
        aria_label="New",
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        stroke_width="2",
        stroke="currentColor",
        cls="size-6"
    )
    
    # 2. Camera icon
    camera_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
        ),
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
        ),
        aria_label="Camera",
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        stroke_width="1.5",
        stroke="currentColor",
        cls="size-6"
    )
    
    # 3. Gallery/Image icon
    gallery_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
        ),
        aria_label="Gallery",
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        stroke_width="1.5",
        stroke="currentColor",
        cls="size-6"
    )
    
    # 4. Microphone/Voice icon
    voice_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"
        ),
        aria_label="Voice",
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        stroke_width="1.5",
        stroke="currentColor",
        cls="size-6"
    )
    

    vertical_fab_with_svgs = Div(
        Div(plus_icon, tabindex="0", role="button", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.secondary)),
        Button(camera_icon, cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button(gallery_icon, cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button(voice_icon, cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        cls=combine_classes(fab)
    )
    assert vertical_fab_with_svgs.attrs['class'] == "fab"
    
    
    # Return all elements in a Div
    return Div(
        vertical_fab_with_svgs,
        cls=combine_classes(min_h(50))
    )

# Run the tests
test_fab_with_svgs_fasthtml_examples()
<div class="min-h-50">
  <div class="fab">
    <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-secondary">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" aria-label="New" fill="none" stroke-width="2" stroke="currentColor" class="size-6"><path d="M12 4.5v15m7.5-7.5h-15" stroke-linecap="round" stroke-linejoin="round"></path></svg>    </div>
<button class="btn btn-lg btn-circle"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" aria-label="Camera" fill="none" stroke-width="1.5" stroke="currentColor" class="size-6"><path d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><button class="btn btn-lg btn-circle"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" aria-label="Gallery" fill="none" stroke-width="1.5" stroke="currentColor" class="size-6"><path d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><button class="btn btn-lg btn-circle"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" aria-label="Voice" fill="none" stroke-width="1.5" stroke="currentColor" class="size-6"><path d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>  </div>
</div>
test_func = test_fab_with_svgs_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_fab_with_labels_fasthtml_examples

 test_fab_with_labels_fasthtml_examples ()

Test FAB with labels from daisyUI v5 documentation.

Exported source 
def test_fab_with_labels_fasthtml_examples():
    """Test FAB with labels from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers, btn_colors
    from cjm_fasthtml_tailwind.utilities.sizing import min_h

    vertical_fab_with_labels = Div(
        Div("F", tabindex="0", role="button", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.success)),
        Div("Label B", Button("A", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle))),
        Div("Label C", Button("B", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle))),
        Div("Label D", Button("C", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle))),
        cls=combine_classes(fab)
    )
    assert vertical_fab_with_labels.attrs['class'] == "fab"
    
    
    # Return all elements in a Div
    return Div(
        vertical_fab_with_labels,
        cls=combine_classes(min_h(50))
    )

# Run the tests
test_fab_with_labels_fasthtml_examples()
<div class="min-h-50">
  <div class="fab">
    <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-success">F</div>
    <div>
Label B<button class="btn btn-lg btn-circle">A</button>    </div>
    <div>
Label C<button class="btn btn-lg btn-circle">B</button>    </div>
    <div>
Label D<button class="btn btn-lg btn-circle">C</button>    </div>
  </div>
</div>
test_func = test_fab_with_labels_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_fab_rectangle_buttons_fasthtml_examples

 test_fab_rectangle_buttons_fasthtml_examples ()

Test FAB with rectangle buttons from daisyUI v5 documentation.

Exported source 
def test_fab_rectangle_buttons_fasthtml_examples():
    """Test FAB with rectangle buttons from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers, btn_colors
    from cjm_fasthtml_tailwind.utilities.sizing import min_h

    vertical_fab = Div(
        Div("F", tabindex="0", role="button", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.success)),
        Button("Button A", cls=combine_classes(btn, btn_sizes.lg)),
        Button("Button B", cls=combine_classes(btn, btn_sizes.lg)),
        Button("Button C", cls=combine_classes(btn, btn_sizes.lg)),
        cls=combine_classes(fab)
    )
    assert vertical_fab.attrs['class'] == "fab"
    
    
    # Return all elements in a Div
    return Div(
        vertical_fab,
        cls=combine_classes(min_h(50))
    )

# Run the tests
test_fab_rectangle_buttons_fasthtml_examples()
<div class="min-h-50">
  <div class="fab">
    <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-success">F</div>
<button class="btn btn-lg">Button A</button><button class="btn btn-lg">Button B</button><button class="btn btn-lg">Button C</button>  </div>
</div>
test_func = test_fab_rectangle_buttons_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_fab_close_fasthtml_examples

 test_fab_close_fasthtml_examples ()

Test FAB with close button from daisyUI v5 documentation.

Exported source 
def test_fab_close_fasthtml_examples():
    """Test FAB with close button from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div, Span
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers, btn_colors
    from cjm_fasthtml_tailwind.utilities.sizing import min_h

    vertical_fab = Div(
        Div("F", tabindex="0", role="button", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.info)),
        Div(
            "Close", 
            Span("x", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.error)), 
            cls=combine_classes(fab_close)
        ),
        Div("Label A", Button("A", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle))),
        Div("Label B", Button("B", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle))),
        Div("Label C", Button("C", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle))),
        cls=combine_classes(fab)
    )
    assert vertical_fab.attrs['class'] == "fab"
    
    
    # Return all elements in a Div
    return Div(
        vertical_fab,
        cls=combine_classes(min_h(50))
    )

# Run the tests
test_fab_close_fasthtml_examples()
<div class="min-h-50">
  <div class="fab">
    <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-info">F</div>
    <div class="fab-close">
Close<span class="btn btn-lg btn-circle btn-error">x</span>    </div>
    <div>
Label A<button class="btn btn-lg btn-circle">A</button>    </div>
    <div>
Label B<button class="btn btn-lg btn-circle">B</button>    </div>
    <div>
Label C<button class="btn btn-lg btn-circle">C</button>    </div>
  </div>
</div>
test_func = test_fab_close_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_fab_main_action_fasthtml_examples

 test_fab_main_action_fasthtml_examples ()

Test FAB with main action button from daisyUI v5 documentation.

Exported source 
def test_fab_main_action_fasthtml_examples():
    """Test FAB with main action button from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div, Span
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers, btn_colors
    from cjm_fasthtml_tailwind.utilities.sizing import min_h

    vertical_fab = Div(
        Div("F", tabindex="0", role="button", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.primary)),
        Div(
            "Main Action", 
            Button("M", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.secondary)), 
            cls=combine_classes(fab_main_action)
        ),
        Div("Label A", Button("A", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle))),
        Div("Label B", Button("B", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle))),
        Div("Label C", Button("C", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle))),
        cls=combine_classes(fab)
    )
    assert vertical_fab.attrs['class'] == "fab"
    
    
    # Return all elements in a Div
    return Div(
        vertical_fab,
        cls=combine_classes(min_h(50))
    )

# Run the tests
test_fab_main_action_fasthtml_examples()
<div class="min-h-50">
  <div class="fab">
    <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">F</div>
    <div class="fab-main-action">
Main Action<button class="btn btn-lg btn-circle btn-secondary">M</button>    </div>
    <div>
Label A<button class="btn btn-lg btn-circle">A</button>    </div>
    <div>
Label B<button class="btn btn-lg btn-circle">B</button>    </div>
    <div>
Label C<button class="btn btn-lg btn-circle">C</button>    </div>
  </div>
</div>
test_func = test_fab_main_action_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_fab_single_fasthtml_examples

 test_fab_single_fasthtml_examples ()

Test a single FAB from daisyUI v5 documentation.

Exported source 
def test_fab_single_fasthtml_examples():
    """Test a single FAB from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div, Span
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers, btn_colors
    from cjm_fasthtml_tailwind.utilities.sizing import min_h

    vertical_fab = Div(
        Div("F", tabindex="0", role="button", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.primary)),
        cls=combine_classes(fab)
    )
    assert vertical_fab.attrs['class'] == "fab"
    
    
    # Return all elements in a Div
    return Div(
        vertical_fab,
        cls=combine_classes(min_h(50))
    )

# Run the tests
test_fab_single_fasthtml_examples()
<div class="min-h-50">
  <div class="fab">
    <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">F</div>
  </div>
</div>
test_func = test_fab_single_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_fab_flower_fasthtml_examples

 test_fab_flower_fasthtml_examples ()

Test FAB flower modifier from daisyUI v5 documentation.

Exported source 
def test_fab_flower_fasthtml_examples():
    """Test FAB flower modifier from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers, btn_colors
    from cjm_fasthtml_tailwind.utilities.sizing import min_h

    vertical_fab = Div(
        Div("F", tabindex="0", role="button", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.success)),
        Button("M", cls=combine_classes(fab_main_action, btn, btn_sizes.lg, btn_modifiers.circle)),
        Button("A", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button("B", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button("C", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button("D", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        cls=combine_classes(fab, fab_modifiers.flower)
    )
    assert "fab" in vertical_fab.attrs['class']
    assert "fab-flower" in vertical_fab.attrs['class']
    
    
    # Return all elements in a Div
    return Div(
        vertical_fab,
        cls=combine_classes(min_h(50))
    )

# Run the tests
test_fab_flower_fasthtml_examples()
<div class="min-h-50">
  <div class="fab fab-flower">
    <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-success">F</div>
<button class="fab-main-action btn btn-lg btn-circle">M</button><button class="btn btn-lg btn-circle">A</button><button class="btn btn-lg btn-circle">B</button><button class="btn btn-lg btn-circle">C</button><button class="btn btn-lg btn-circle">D</button>  </div>
</div>
test_func = test_fab_flower_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_fab_flower_with_svgs_fasthtml_examples

 test_fab_flower_with_svgs_fasthtml_examples ()

Test FAB flower modifier with SVG icons from daisyUI v5 documentation.

Exported source 
def test_fab_flower_with_svgs_fasthtml_examples():
    """Test FAB flower modifier with SVG icons from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers, btn_colors
    from cjm_fasthtml_tailwind.utilities.sizing import min_h

    from fasthtml.svg import Svg, Path
    
    # 1. Plus/New icon (main FAB trigger button)
    plus_icon_filled = Svg(
        Path(
            d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
        ),
        aria_label="New",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 16 16",
        fill="currentColor",
        cls="size-6"
    )
    
    # 2. Pencil/Edit icon (main action button when FAB is open)
    pencil_icon = Svg(
        Path(
            fill_rule="evenodd",
            d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z",
            clip_rule="evenodd"
        ),
        aria_label="New post",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 16 16",
        fill="currentColor",
        cls="size-6"
    )
    
    # 3. Camera icon (filled version)
    camera_icon_filled = Svg(
        Path(d="M9.5 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"),
        Path(
            fill_rule="evenodd",
            d="M2.5 5A1.5 1.5 0 0 0 1 6.5v5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 13.5 5h-.879a1.5 1.5 0 0 1-1.06-.44l-1.122-1.12A1.5 1.5 0 0 0 9.38 3H6.62a1.5 1.5 0 0 0-1.06.44L4.439 4.56A1.5 1.5 0 0 1 3.38 5H2.5ZM11 8.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z",
            clip_rule="evenodd"
        ),
        aria_label="New camera photo",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 16 16",
        fill="currentColor",
        cls="size-6"
    )
    
    # 4. Poll/List icon
    poll_icon = Svg(
        Path(
            d="M3 4.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6.25 3a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 7.25a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 11.5a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM4 12.25a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
        ),
        aria_label="New poll",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 16 16",
        fill="currentColor",
        cls="size-6"
    )
    
    # 5. Gallery/Image icon (filled version)
    gallery_icon_filled = Svg(
        Path(
            fill_rule="evenodd",
            d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
            clip_rule="evenodd"
        ),
        aria_label="New gallery photo",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 16 16",
        fill="currentColor",
        cls="size-6"
    )
    
    # 6. Microphone/Voice icon (filled version)
    voice_icon_filled = Svg(
        Path(d="M8 1a2 2 0 0 0-2 2v4a2 2 0 1 0 4 0V3a2 2 0 0 0-2-2Z"),
        Path(
            d="M4.5 7A.75.75 0 0 0 3 7a5.001 5.001 0 0 0 4.25 4.944V13.5h-1.5a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-1.5v-1.556A5.001 5.001 0 0 0 13 7a.75.75 0 0 0-1.5 0 3.5 3.5 0 1 1-7 0Z"
        ),
        aria_label="New voice",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 16 16",
        fill="currentColor",
        cls="size-6"
    )

    vertical_fab = Div(
        Div(plus_icon_filled, tabindex="0", role="button", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button(pencil_icon, cls=combine_classes(fab_main_action, btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.primary)),
        Button(camera_icon_filled, cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button(poll_icon, cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button(gallery_icon_filled, cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        Button(voice_icon_filled, cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)),
        cls=combine_classes(fab, fab_modifiers.flower)
    )
    assert "fab" in vertical_fab.attrs['class']
    assert "fab-flower" in vertical_fab.attrs['class']
    
    
    # Return all elements in a Div
    return Div(
        vertical_fab,
        cls=combine_classes(min_h(50))
    )

# Run the tests
test_fab_flower_with_svgs_fasthtml_examples()
<div class="min-h-50">
  <div class="fab fab-flower">
    <div tabindex="0" role="button" class="btn btn-lg btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" aria-label="New" fill="currentColor" class="size-6"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg>    </div>
<button class="fab-main-action btn btn-lg btn-circle btn-primary"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" aria-label="New post" fill="currentColor" class="size-6"><path d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="btn btn-lg btn-circle"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" aria-label="New camera photo" fill="currentColor" class="size-6"><path d="M9.5 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"></path><path d="M2.5 5A1.5 1.5 0 0 0 1 6.5v5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 13.5 5h-.879a1.5 1.5 0 0 1-1.06-.44l-1.122-1.12A1.5 1.5 0 0 0 9.38 3H6.62a1.5 1.5 0 0 0-1.06.44L4.439 4.56A1.5 1.5 0 0 1 3.38 5H2.5ZM11 8.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="btn btn-lg btn-circle"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" aria-label="New poll" fill="currentColor" class="size-6"><path d="M3 4.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6.25 3a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 7.25a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 11.5a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM4 12.25a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path></svg></button><button class="btn btn-lg btn-circle"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" aria-label="New gallery photo" fill="currentColor" class="size-6"><path d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="btn btn-lg btn-circle"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" aria-label="New voice" fill="currentColor" class="size-6"><path d="M8 1a2 2 0 0 0-2 2v4a2 2 0 1 0 4 0V3a2 2 0 0 0-2-2Z"></path><path d="M4.5 7A.75.75 0 0 0 3 7a5.001 5.001 0 0 0 4.25 4.944V13.5h-1.5a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-1.5v-1.556A5.001 5.001 0 0 0 13 7a.75.75 0 0 0-1.5 0 3.5 3.5 0 1 1-7 0Z"></path></svg></button>  </div>
</div>
test_func = test_fab_flower_with_svgs_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_fab_flower_with_tooltip_fasthtml_examples

 test_fab_flower_with_tooltip_fasthtml_examples ()

Test FAB flower modifier with tooltip from daisyUI v5 documentation.

Exported source 
def test_fab_flower_with_tooltip_fasthtml_examples():
    """Test FAB flower modifier with tooltip from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers, btn_colors
    from cjm_fasthtml_daisyui.components.feedback.tooltip import tooltip, tooltip_placement
    from cjm_fasthtml_tailwind.utilities.sizing import min_h

    vertical_fab = Div(
        Div("F", tabindex="0", role="button", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.info)),
        Button("M", cls=combine_classes(fab_main_action, btn, btn_sizes.lg, btn_modifiers.circle, btn_colors.success)),
        Div(Button("A", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)), cls=combine_classes(tooltip, tooltip_placement.left), data_tip="Label A"),
        Div(Button("B", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)), cls=combine_classes(tooltip, tooltip_placement.left), data_tip="Label B"),
        Div(Button("C", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)), cls=combine_classes(tooltip), data_tip="Label C"),
        Div(Button("D", cls=combine_classes(btn, btn_sizes.lg, btn_modifiers.circle)), cls=combine_classes(tooltip), data_tip="Label D"),
        cls=combine_classes(fab, fab_modifiers.flower)
    )
    assert "fab" in vertical_fab.attrs['class']
    assert "fab-flower" in vertical_fab.attrs['class']
    
    
    # Return all elements in a Div
    return Div(
        vertical_fab,
        cls=combine_classes(min_h(50))
    )

# Run the tests
test_fab_flower_fasthtml_examples()
<div class="min-h-50">
  <div class="fab fab-flower">
    <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-success">F</div>
<button class="fab-main-action btn btn-lg btn-circle">M</button><button class="btn btn-lg btn-circle">A</button><button class="btn btn-lg btn-circle">B</button><button class="btn btn-lg btn-circle">C</button><button class="btn btn-lg btn-circle">D</button>  </div>
</div>
test_func = test_fab_flower_with_tooltip_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()