{"componentChunkName":"component---src-pages-experimental-delete-pattern-index-mdx","path":"/experimental/delete-pattern/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Delete pattern","description":"Deleting is a destructive action. To protect user resources, your product should support ‘undo’ where possible."},"relativePagePath":"/experimental/delete-pattern/index.mdx","titleType":"prepend","MdxNode":{"id":"72814549-6d1b-5f43-8620-f58198eda556","children":[],"parent":"5fae4b0d-8799-5003-b5d0-ca8350546e4d","internal":{"content":"---\ntitle: Delete pattern\ndescription: Deleting is a destructive action. To protect user resources, your product should support ‘undo’ where possible.\n---\n\n### Deleting is a destructive action. To protect user resources, your product should support ‘undo’ where possible. If ‘undo’ support is impossible, request user confirmation before deleting a resource or asset.\n\n#### Status:\n\nExperimental\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson)\n\n<AnchorLinks>\n\n<AnchorLink>High impact</AnchorLink>\n<AnchorLink>Medium impact</AnchorLink>\n<AnchorLink>Low impact</AnchorLink>\n\n</AnchorLinks>\n\n![Example of a deletion pattern using a modal in context](images/1.png)\n\n<Caption>Example of a deletion pattern using a moda</Caption>\n\n## High impact\n\nA high-impact deletion cannot be reversed. The action would result in a significant loss for a user if done accidentally.\n\nFor high-impact scenarios, a user should confirm the action by manually entering the name of the resource. The 'Delete' button is enabled when the text entered perfectly matches the resource name.\n\nThe text should tell the user the consequences of the deletion and that the action cannot be undone. Optionally, when the delete button is selected it changes to `Deleting…`.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an un-populated high-impact deletion modal](images/2.png)\n\n![Example of a populated high-impact deletion modal](images/3.png)\n\n![Example of a high-impact deletion modal in its \"deleting\" state](images/5_0.png)\n\n![Example of a high-impact deletion modal in its \"deleting\" state](images/5_1.png)\n\n</Column>\n</Row>\n\nYou can choose to show a notification confirming deletion is completed. This is useful when the deletion of the resource takes more than a few moments.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a successful delete notification](images/5_2.png)\n\n</Column>\n</Row>\n\n## Medium impact\n\nA medium-impact deletion is one that cannot be reversed, but would not be catastrophic if done accidentally. When deleting is medium-impact, a confirmation dialog should be presented to the user which displays:\n\n- The name of the resource\n- Consequences of the deletion\n- The action cannot be undone\n\nOptionally, when the delete button is selected it changes to `Deleting…`.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a standard delete modal](images/6.png)\n\n![Example of a standard delete modal in its \"deleting\" state](images/1_1.png)\n\n![Example of a standard delete modal in its \"deleting\" state](images/1_2.png)\n\n</Column>\n</Row>\n\nYou can choose to show a notification confirming deletion is completed. This is useful when the deletion of the resource takes more than a few moments.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a successful delete notification](images/7_updated.png)\n\n</Column>\n</Row>\n\n## Low impact\n\nRequiring the user to confirm deletion is generally recommended. However, in very low impact situations, such as when an ‘undo’ option is available, user confirmation may not be required.\n","type":"Mdx","contentDigest":"522b7e7f434d557eec20a14ce917bc66","counter":1259,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Delete pattern","description":"Deleting is a destructive action. To protect user resources, your product should support ‘undo’ where possible."},"exports":{},"rawBody":"---\ntitle: Delete pattern\ndescription: Deleting is a destructive action. To protect user resources, your product should support ‘undo’ where possible.\n---\n\n### Deleting is a destructive action. To protect user resources, your product should support ‘undo’ where possible. If ‘undo’ support is impossible, request user confirmation before deleting a resource or asset.\n\n#### Status:\n\nExperimental\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson)\n\n<AnchorLinks>\n\n<AnchorLink>High impact</AnchorLink>\n<AnchorLink>Medium impact</AnchorLink>\n<AnchorLink>Low impact</AnchorLink>\n\n</AnchorLinks>\n\n![Example of a deletion pattern using a modal in context](images/1.png)\n\n<Caption>Example of a deletion pattern using a moda</Caption>\n\n## High impact\n\nA high-impact deletion cannot be reversed. The action would result in a significant loss for a user if done accidentally.\n\nFor high-impact scenarios, a user should confirm the action by manually entering the name of the resource. The 'Delete' button is enabled when the text entered perfectly matches the resource name.\n\nThe text should tell the user the consequences of the deletion and that the action cannot be undone. Optionally, when the delete button is selected it changes to `Deleting…`.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an un-populated high-impact deletion modal](images/2.png)\n\n![Example of a populated high-impact deletion modal](images/3.png)\n\n![Example of a high-impact deletion modal in its \"deleting\" state](images/5_0.png)\n\n![Example of a high-impact deletion modal in its \"deleting\" state](images/5_1.png)\n\n</Column>\n</Row>\n\nYou can choose to show a notification confirming deletion is completed. This is useful when the deletion of the resource takes more than a few moments.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a successful delete notification](images/5_2.png)\n\n</Column>\n</Row>\n\n## Medium impact\n\nA medium-impact deletion is one that cannot be reversed, but would not be catastrophic if done accidentally. When deleting is medium-impact, a confirmation dialog should be presented to the user which displays:\n\n- The name of the resource\n- Consequences of the deletion\n- The action cannot be undone\n\nOptionally, when the delete button is selected it changes to `Deleting…`.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a standard delete modal](images/6.png)\n\n![Example of a standard delete modal in its \"deleting\" state](images/1_1.png)\n\n![Example of a standard delete modal in its \"deleting\" state](images/1_2.png)\n\n</Column>\n</Row>\n\nYou can choose to show a notification confirming deletion is completed. This is useful when the deletion of the resource takes more than a few moments.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a successful delete notification](images/7_updated.png)\n\n</Column>\n</Row>\n\n## Low impact\n\nRequiring the user to confirm deletion is generally recommended. However, in very low impact situations, such as when an ‘undo’ option is available, user confirmation may not be required.\n","fileAbsolutePath":"/tmp/35443907/src/pages/experimental/delete-pattern/index.mdx"}}}}