button should have a confirm property to trigger confirm dialog

a movie gallery (still)

What is your problem ?

The button component creates a clickable button that triggers an action. This action can be destructive, such as deleting or altering a record.

It would be beneficial to have a confirmation dialog appear when the button is clicked. If the user clicks "Confirm," the action will be performed; otherwise, the confirmation dialog will close, and the user will remain on the current page.

This feature would help prevent accidental deletions.

What are you currently doing ?

Living in fear :)

Describe the solution you'd like

Have additional optional properties for the component:

"confirm" a bolean ; enable confirm dialog when set to true ; default to false (for backward compatibility)
"confirm_text" a text ; message displayed in the confirmation dialog; defaults to "are you sure you want to proceed ?"

select
   'button' as component
;
select
      '/delete_item.sql?id=' || id as link
    , 'trash' as icon
    , 'danger' as color
    , 'Delete' as title
    , true as confirm
    , 'You are about  to delete item "' || title  || '". please confirm' as confirm_text
;

Describe alternatives you've considered

None

@setop

We could do even better than an alert, and use tabler's confirmation modals. I'm all for it ! Are you interested in implementing this, @setop ? Can you open a pull request ?

Are you interested in implementing this, @setop ? Can you open a pull request ?

I think I'll start with #821 which is probably simpler for a start.

I think this is still and issue

$ cat tests/end-to-end/fixtures/repro_831/index.sql 
SELECT 'button' AS component;
SELECT 'Delete' AS title, 'deleted.sql' AS link, 'red' AS color, 'Delete this movie?' AS confirm;

$ cat tests/end-to-end/fixtures/repro_831/deleted.sql 
SELECT 'text' AS component, 'Deleted' AS contents;

$ cat tests/end-to-end/fixtures/repro_831/test.ts 
import { expect, test } from "../../fixture.ts";

test("a button with confirm asks before it acts", async ({ page }) => {
  await page.getByRole("button", { name: "Delete" }).click();
  await expect(page.getByRole("dialog", { name: "Delete this movie?" })).toBeVisible();
  await expect(page).not.toHaveURL(/deleted/);
});

repro_831	sqlite
v0.33.0	✘ failed
v0.47.0	✘ failed
tree	✘ failed

On commit 2d45bd4: nix run .#reproduce -- repro_831 sqlite v0.33.0 v0.47.0 tree

see my comment there: #1587 (comment)

I don't think buttons should have a confirmation property, it should be the target page that has it.

Navigation Menu

Repository navigation

button should have a confirm property to trigger confirm dialog #831

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

button should have a confirm property to trigger confirm dialog #831

Description

Activity

lovasoa commented on Feb 27, 2025

setop commented on Feb 27, 2025

81reap commented on Oct 31, 2026

lovasoa commented on Oct 31, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions