On this page

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 or tag editor. Deletion is instantaneous and doesn’t require additional feedback.

Building blocks

A
B
C
A
B
C

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

  • Keep labels and descriptions clear and concise.

  • Use parallel sentence structure.

  • Use sentence case for all text. Don’t use title case.

  • Use terminal punctuation (periods, exclamation points, question marks).

  • Use present-tense verbs and active voice wherever possible.

  • Don't use "please," "thank you," or Latinisms such as "e.g.," "i.e.," or "etc."

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.

  • Make sure you define ARIA labels for the selection inputs that are aligned with the language context of your application.

Related patterns

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.