Components / Overlays / ConfirmOpen in Figma

Confirm

Ready

A small centred popup that asks people to confirm an action before it happens.

Platforms Phone · TabletGroup OverlaysUpdated 26 Oct 2026

When to use

  • The action can't be undone, such as delete or cancel.
  • The action has a cost people may not expect.

When not to use

If people need toUse
Choose between several optionsBottom sheet
Tell people an action worked or failedToast
Ask for a reason when rejectingBottom sheet with a text field

Anatomy

gpp_maybe
Title
Body text that says what will happen.
  1. Hero icon · required, 64
  2. Title · required: the question
  3. Body · optional: what will happen
  4. Cancel · required, outline, left
  5. Action · required, filled, right

Variants

VariantPurposeFigma
DestructiveDelete, cancel, remove: Coral icon and Coral actionDesigned
Non-destructiveAn action with a cost that is not a loss: Antz green icon and actionTemporary rule

States

StateWhenWhat changesFigma
DefaultThe popup is openAs drawnDesigned

Behaviour

  • Opens over a Navy backdrop at 50%, centred on the screen.
  • Cancel, or tapping the backdrop, closes it and nothing happens.
  • The action button does the action and closes the popup; a toast confirms the result.
  • Never stack a confirm on another confirm.

Phone and tablet

PhoneTablet
Width358 (full width less 16 each side)358, centred

Content

PartRule
TitleA short question naming the action and the thing: "Delete record?"
BodyWhat will happen, in one or two lines
ActionThe same verb as the title, such as "Delete"; never "Yes" or "OK"

Do and don't

Delete record?
DoRepeat the verb on the action button.
Are you sure?
Don'tAsk "Are you sure?" with Yes and No.
Bottom sheetToastButtonMenu
← Bottom sheetFilter screen →