One-click delete

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

View demo

On this page

About this page

Published: June 25, 2021

Key UX concepts

With one-click delete, users can quickly delete non-critical, easy to recreate resources. For example, the deletion of a row in attribute editor. Deletion is instantaneous and doesn’t require additional feedback.

Building blocks

A.
Remove button

Allow users to delete the element by adding a Remove button.

B.
Undo - optional

Allow users revoke the last performed deletion by adding an Undo link.

C.
Add new button

Allow users to add new, removable elements on the page.

General guidelines

Do

  • Use one-click delete when you need to quickly remove an element on the page you are editing, like row, input, or item.
  • Use one-click delete when removing elements that can be recovered instantaneously.

Don't

  • Don't use one-click delete when removing resources in tables. Those resources require at least simple confirmation to be provided by the user.
  • Don't use one-click delete when removing resources that can't be recreated instantaneously.

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.

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 simple confirmation

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

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.