Skip to content

Action Buttons

GradientButton and FloatingActionButton are opinionated button wrappers for polished product interfaces. They compose the core Button, so they keep Faststrap's normal button behavior, HTMX attributes, accessible labels, and type="button" default.

Quick Start

from faststrap import FloatingActionButton, GradientButton

GradientButton("Launch", gradient="blue", href="/start")

FloatingActionButton(
    icon="plus",
    variant="success",
    position="bottom-right",
    label="Create item",
    hx_get="/items/new",
    hx_target="#modal",
)

GradientButton

Use GradientButton when you want a stronger call-to-action than a default Bootstrap button.

Parameter Type Default Description
*children Any required Button content.
gradient purple \| blue \| green \| orange \| pink \| str purple Preset or custom CSS gradient.
size sm \| lg \| None None Bootstrap button size.
GradientButton("Start trial", gradient="linear-gradient(135deg, #111827, #22c55e)")

FloatingActionButton

Use FloatingActionButton for a page-level primary action, especially in dashboard and mobile-first layouts.

Parameter Type Default Description
*children Any empty Optional visible content.
icon str \| None None Bootstrap icon name.
variant Bootstrap variant primary Button color.
position bottom-right \| bottom-left \| top-right \| top-left bottom-right Fixed viewport position.
label str \| None Primary action Accessible label.

Notes

  • GradientButton and FloatingActionButton accept normal Button kwargs such as href, hx_get, hx_target, data_bs_toggle, and disabled.
  • faststrap-visual.css is loaded automatically by add_bootstrap().

API Reference

faststrap.components.forms.action_buttons.GradientButton(*children, gradient=UNSET, size=UNSET, **kwargs)

Render a Bootstrap-compatible button with a gradient surface.

Source code in src/faststrap/components/forms/action_buttons.py
@register(category="forms")
@beta
def GradientButton(
    *children: Any,
    gradient: GradientPreset | str | None = UNSET,
    size: SizeType | None = UNSET,
    **kwargs: Any,
) -> Any:
    """Render a Bootstrap-compatible button with a gradient surface."""
    cfg = resolve_defaults("GradientButton", gradient=gradient, size=size)
    c_gradient = cfg.get("gradient") or "purple"
    c_size = cast(SizeType | None, cfg.get("size"))
    gradient_value = GRADIENT_PRESETS.get(str(c_gradient), str(c_gradient))

    user_cls = kwargs.pop("cls", "")
    css_vars = kwargs.pop("css_vars", {}) or {}
    css_vars["--faststrap-gradient-button-bg"] = gradient_value

    return Button(
        *children,
        size=c_size,
        variant="primary",
        cls=merge_classes("faststrap-gradient-button", user_cls),
        css_vars=css_vars,
        **kwargs,
    )

faststrap.components.forms.action_buttons.FloatingActionButton(*children, icon=None, variant=UNSET, position=UNSET, label=UNSET, **kwargs)

Render a fixed-position floating action button.

Source code in src/faststrap/components/forms/action_buttons.py
@register(category="forms")
@beta
def FloatingActionButton(
    *children: Any,
    icon: str | None = None,
    variant: VariantType | None = UNSET,
    position: FabPosition | None = UNSET,
    label: str | None = UNSET,
    **kwargs: Any,
) -> Any:
    """Render a fixed-position floating action button."""
    cfg = resolve_defaults(
        "FloatingActionButton",
        variant=variant,
        position=position,
        label=label,
    )
    c_variant = cast(VariantType, cfg.get("variant") or "primary")
    c_position = cfg.get("position") or "bottom-right"
    c_label = cfg.get("label") or "Primary action"

    user_cls = kwargs.pop("cls", "")
    classes = merge_classes(
        "faststrap-floating-action-button rounded-circle",
        f"fab-{c_position}",
        user_cls,
    )

    return Button(
        *children,
        variant=c_variant,
        icon=icon,
        cls=classes,
        aria_label=c_label,
        **kwargs,
    )