Delete with simple confirmation

Provide a layer of confirmation before deleting resources that cannot be easily recreated.

Published: June 25, 2021
View demo

On this page

Building blocks

Delete with simple confirmation can be used for single-resource deletion or multi-resource deletion.

A.
Modal title

Use Delete together with the resource type. For example: Delete instance

B.
Reassurance

Make sure the user understands everything that is being deleted, and that the action is irreversible. Use important details associated with the resource being deleted, such as the resource name or other unique identifiers. Use bold font weight  to expose resource identifier. For example: Permanently delete distribution CMRVMLFVHDVHU0? You can’t undo this action.

C.
Consequences

State the possible consequences of the action like severity, outcome, and potential cascading effects of the action. This helps the user be aware of the actual impact and scope of the destructive action. Use the info alert format to present this information. If possible, add an external link to detailed documentation for users to consult.

D.
Buttons

Allow users to execute the resource deletion or to exit the delete flow.

General guidelines

Do

  • Use the delete with simple confirmation pattern for running resources whose deletion will not affect other infrastructure. For example: A user deleting a CloudWatch alarm.
  • Inform users about the severity and consequences of the delete action.
  • Give users additional contextual information about the resource being deleted, to adequately inform them about the deletion.

Don't

  • Don't use the delete with simple confirmation pattern if deleting the resource poses a risk of breaking other infrastructure, or causing an outage. Use delete with additional confirmation instead.

Writing guidelines

General writing guidelines

  • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

  • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

  • Use present-tense verbs and active voice.

  • Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.

  • Avoid directional language.

    • For example: use previous not above, use following not below.

  • Use device-independent language.

    • For example: use choose or select not click.

Component-specific guidelines

  • Use sentence case. All words are lowercase except the first word in the phrase, proper nouns, acronyms, and service and feature names. Avoid capitalizing feature names unless absolutely necessary, such as an AWS-specific term or concept.

  • Use second person (you, your) when you address the user.

  • Localize the text on the user interface, including the confirmation text.

    • For example: If the interface is in French, all text including the confirmation text to be entered, should be written in French.

  • Use terminal punctuation for all modal text, except for any text in a list format.

Modal title

  • Use the format: Delete [resource type]

    • For example:

      • For single resource: Delete instance

      • For multiple resources: Delete instances

Reassurance

  • Use the following text:

    • For a single resource: Permanently delete [object_type] [object_name], [object_detail]? You can’t undo this action.

    • For multiple resources: Permanently delete [number of objects] ][object_types]? You can’t undo this action.

  • If you are using the confirmation pattern to permanently end a process, as opposed to delete a resource, use the word Terminate and the process name, instead of delete and the resource name.

Consequences

  • Use text that explains the consequences of an action:

    • For a single resource, use this text: Proceeding with this action will delete the [object_type] with all its content including the [object_types] and can affect related resources like the [object_types]. Learn more

    • For multiple resources, use this text: Proceeding with this action will delete [number of objects][object_types] with all their content including the [object_types] and can affect related resources like the [object_types]. Learn more

      • For example:

        • Permanently delete Cluster576? You can’t undo this action. Proceeding with this action will delete the cluster with all the databases and all the automated snapshots at the end of their retention period. Any manual snapshots will remain until you manually delete them. Learn more

        • Permanently delete 4 instances? You can’t undo this action. Proceeding with this action will delete all the databases in all 4 instances and all the automated snapshots at the end of their retention period. Learn more

Button text

  • For the button that performs the action, use this text: Delete. If your deletion action is called something different, such as Terminate, then use the same verb in the modal title and button.

  • For the button to dismiss the dialog box without completing the action, use this text: Cancel

Accessibility guidelines

General accessibility guidelines

  • Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.

  • Make sure to define ARIA labels aligned with the language context of your application.

  • Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.

  • Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.

Delete patterns

With delete patterns, users can delete existing resources.

Delete with additional confirmation

The delete with additional confirmation pattern helps prevent users from performing accidental, high-severity deletions by adding friction during the deletion process.

One-click delete

With the one-click delete pattern, users can quickly delete low-risk, non-critical resources.

Modal

A user interface element subordinate to an application's main window. It prevents interaction with the main page content, but keeps it visible with the modal as a child window in front of it.