ConfirmPrompt

ConfirmPrompt renders a reusable Bootstrap modal confirmation dialog. Use it when you need a lightweight confirmation step before a destructive or important action.

This is an alternative to wrapping every button with hx-confirm individually. The modal can be triggered from any button using data-bs-toggle="modal" and data-bs-target="#prompt-id".

Quick Start

from faststrap import ConfirmPrompt, Button

# Render the prompt somewhere in your layout (e.g. inside MainView)
ConfirmPrompt("Are you sure you want to delete this item?")

# Trigger it from a button
Button(
    "Delete Item",
    variant="danger",
    data_bs_toggle="modal",
    data_bs_target="#faststrap-confirm-prompt",
)

Visual Examples & Use Cases

1. Basic Confirmation

Live Preview

ConfirmPrompt("Are you sure you want to delete this item?")

2. Custom Confirm Text and Variant

Live Preview

ConfirmPrompt(
    "Delete this project permanently?",
    confirm_button_text="Yes, delete",
    confirm_button_variant="danger",
)

Practical Functionality

1. HTMX Confirmation Pattern

from faststrap import ConfirmPrompt, Button

# In your layout:
ConfirmPrompt("Delete this item?", id="delete-confirm")

# In your item list:
Button(
    "Delete",
    variant="danger",
    data_bs_toggle="modal",
    data_bs_target="#delete-confirm",
    hx_delete=f"/items/{item_id}",
    hx_target="#item-list",
    hx_swap="outerHTML",
)

2. Multiple Confirmation Prompts

# Each prompt needs a unique ID
ConfirmPrompt("Delete item?", id="delete-item-confirm")
ConfirmPrompt("Archive project?", id="archive-project-confirm")

# Trigger with matching data-bs-target
Button("Delete", data_bs_toggle="modal", data_bs_target="#delete-item-confirm")
Button("Archive", data_bs_toggle="modal", data_bs_target="#archive-project-confirm")

3. With Server-Side Logic

@app.post("/items/{item_id}/delete")
def delete_item(item_id: int):
    item = get_item(item_id)
    if not item:
        return Alert("Item not found", variant="warning")
    db.delete(item)
    return Toast("Item deleted", variant="success")

Parameter Reference

Parameter	Type	Default	Description
`message`	`str`	`"Are you sure?"`	Confirmation message to display.
`confirm_button_text`	`str \\| None`	`None`	Text for the confirm button. Defaults to the capitalized first word of the message.
`cancel_button_text`	`str \\| None`	`None`	Text for the cancel button. Defaults to `"Cancel"`.
`confirm_button_variant`	`str`	`"danger"`	Bootstrap variant for the confirm button.
`id`	`str`	`"faststrap-confirm-prompt"`	HTML ID for the modal (used with `data-bs-target`).
`**kwargs`	`Any`	`{}`	Additional HTML attributes passed to the modal container.

API Reference

`faststrap.presets.interactions.ConfirmPrompt(message='Are you sure?', *, confirm_button_text=None, cancel_button_text=None, confirm_button_variant='danger', **kwargs)`

HTMX-friendly confirmation prompt.

Returns a hidden confirmation panel that shows when triggered. This is a lightweight alternative to wrapping every button with hx-confirm individually.

Parameters:

Name	Type	Description	Default
`message`	`str`	Confirmation message to display.	`'Are you sure?'`
`confirm_button_text`	`str \| None`	Text for the confirm button. Defaults to the capitalized first word of the message, or "Confirm".	`None`
`cancel_button_text`	`str \| None`	Text for the cancel button. Defaults to "Cancel".	`None`
`confirm_button_variant`	`str`	Bootstrap variant for the confirm button.	`'danger'`
`**kwargs`	`Any`	Additional HTML attributes for the container.	`{}`

Returns:

Type	Description
`Div`	FastHTML Div element containing the confirmation prompt.

Source code in src/faststrap/presets/interactions.py

def ConfirmPrompt(
    message: str = "Are you sure?",
    *,
    confirm_button_text: str | None = None,
    cancel_button_text: str | None = None,
    confirm_button_variant: str = "danger",
    **kwargs: Any,
) -> Div:
    """HTMX-friendly confirmation prompt.

    Returns a hidden confirmation panel that shows when triggered.
    This is a lightweight alternative to wrapping every button with
    `hx-confirm` individually.

    Args:
        message: Confirmation message to display.
        confirm_button_text: Text for the confirm button. Defaults to the
            capitalized first word of the message, or "Confirm".
        cancel_button_text: Text for the cancel button. Defaults to "Cancel".
        confirm_button_variant: Bootstrap variant for the confirm button.
        **kwargs: Additional HTML attributes for the container.

    Returns:
        FastHTML Div element containing the confirmation prompt.
    """
    resolved_confirm_text = confirm_button_text or message.split()[0].capitalize() or "Confirm"
    resolved_cancel_text = cancel_button_text or "Cancel"

    confirm_btn = Button(
        resolved_confirm_text,
        variant=confirm_button_variant,  # type: ignore[arg-type]
        data_bs_dismiss="modal",
    )
    cancel_btn = Button(
        resolved_cancel_text,
        variant="secondary",  # type: ignore[arg-type]
        data_bs_dismiss="modal",
    )

    prompt_id = kwargs.pop("id", "faststrap-confirm-prompt")
    kwargs["id"] = prompt_id

    return Div(
        Div(
            Div(
                Div(message, cls="modal-body"),
                Div(
                    cancel_btn,
                    confirm_btn,
                    cls="modal-footer",
                ),
                cls="modal-content",
            ),
            cls="modal-dialog",
            role="document",
        ),
        cls="modal fade",
        tabindex="-1",
        data_bs_backdrop="static",
        **kwargs,
    )