Skip to content
Block Kit for React
Esc
↑↓navigate↵open⌘Jpreview
On this page

Confirmation dialogs

Add an "are you sure?" step to any interactive element with the confirm composition object.

confirm isn’t an element you place in a block. It’s a composition object you attach to an interactive element’s own confirm field. When Slack renders the element and the user interacts with it, a modal dialog appears first; the underlying action only fires if the user picks confirm.

Your AppAPP
onActionInteract with the preview.

Click Delete: the dialog opens and the actions log below stays empty until you pick a button. Choosing “Delete” logs the block_actions payload for the button, exactly as if it had been clicked with no confirm at all. Choosing “Cancel” (or clicking outside the dialog) closes it and nothing is logged: no action fires, and no element state changes.

Fields

PropType
title?PlainTextElement

The dialog's heading. Maximum length is 100 characters.

TypePlainTextElement
textPlainTextElement | MrkdwnElement

The explanatory body text. Maximum length is 300 characters.

TypePlainTextElement | MrkdwnElement
confirm?PlainTextElement

Label for the button that confirms the action. Maximum length is 30 characters. Defaults to "Confirm".

TypePlainTextElement
deny?PlainTextElement

Label for the button that cancels the action. Maximum length is 30 characters. Defaults to "Cancel".

TypePlainTextElement
style?"primary" | "danger"

Color of the confirm button. `danger` renders red; omit for the default green `primary`.

Type"primary" | "danger"

Examples

A danger-style confirm on a delete button

Pair style: "danger" on the button with style: "danger" on its confirm object so the button’s own color and the dialog’s confirm button agree.

Your AppAPP
onActionInteract with the preview.

Confirm on a select

Any *_select (and its multi_ variant) accepts confirm. It fires each time the value changes, before the new selection is committed.

Your AppAPP
Reassign this issue
onActionInteract with the preview.

Confirm on checkboxes

Checkboxes and radio buttons also accept confirm. For checkboxes it only appears when checking a box. Unchecking one never asks for confirmation.

Your AppAPP
onActionInteract with the preview.

Interactivity

confirm gates the element’s own action rather than emitting one of its own. What actually happens when the user chooses confirm or deny:

  • Confirm: the dialog closes, and the element behaves exactly as it would with no confirm at all. onAction fires with the element’s normal payload, and (for stateful elements like selects, checkboxes, radio buttons, and date/time pickers) state.values updates to the new value.
  • Deny, or dismiss by clicking outside the dialog: the dialog closes and nothing else happens. onAction doesn’t fire, state.values doesn’t change, and (for a url button) no new tab opens. The element is left exactly as it was before the interaction.

There’s no separate action payload for the confirm/deny choice itself. Slack doesn’t report it, and neither does this library.

Elements overview

Where each element can live, and how action_id and block_id fit together.

Button

The most common place to attach a confirm object.

Overflow menu

A kebab menu whose whole menu can be gated behind one confirm.

Select menus

Every *_select and multi_*_select variant accepts confirm.

Was this page helpful?