{"componentChunkName":"component---src-pages-patterns-common-actions-index-mdx","path":"/patterns/common-actions/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Common actions","description":"Common actions are frequently used actions that appear across different components and workflows."},"relativePagePath":"/patterns/common-actions/index.mdx","titleType":"prepend","MdxNode":{"id":"528be764-73be-585d-8b80-7067b739e69f","children":[],"parent":"7c6dc1d6-a5b0-554a-95d2-5909e2fbc174","internal":{"content":"---\ntitle: Common actions\ndescription: Common actions are frequently used actions that appear across different components and workflows.\n---\n\n\n\nCommon actions are frequently used actions that appear across different components and workflows. For platform consistency, these actions should only be applied in the ways described below.\n\n\n\n## Regressive actions\n\n\n\nCancel\nClear\nClose\nDelete\nErrors\nRemove\nReset\n\n\n\n### Cancel\n\nCancel stops the current action and closes the component or item. Warn the user of any negative consequences of stopping the action from progressing, such as data corruption or data loss.\n\nUse a secondary button or a link for cancel actions.\n\n\n\n### Clear\n\nClear removes data from a field or removes selections. Clear can also delete the contents of a document, such as a log. Typically, the default selection or value is reset for controls that have a default selection or value, such as radio buttons.\n\nUse the `x` icon on the right side of a field, item, or value.\n\n\n\n### Close\n\nClose terminates the current page, window, or menu. Close is also used to dismiss information, such as notifications.\n\nUse the `close` icon, which is typically placed on the upper right side of the element. Do not use close in a button.\n\n\n\n### Delete\n\nDelete destroys an object. Delete actions cannot be easily undone and are typically permanent. The user should be warned of the negative consequences of destroying an object, such as loss of data. Use either the `delete` or `trash can` icon, a danger button, or a danger option in a menu. A danger modal is used when a warning is needed to confirm an action.\n\n\n\n#### Non-dangerous deletion (~5% of cases)\n\nUse when it's trivial to undo deletion or re-create the item. Delete the item upon click or tap without further warning.\n\n#### Moderate danger deletion (~80% of cases)\n\nUse when an action cannot be undone or the item cannot be recreated easily. This pattern is also useful if you're deleting more than one thing.\n\nAsk for confirmation of the delete, with guidance about what will occur if they delete.\n\n#### High danger deletion (~15% of cases)\n\nUse when it would be very expensive or time-consuming to recreate an item. Also use if the action deletes a large number of items, or if other important items would be deleted as a result of the action.\n\nIn addition to presenting a dialog, have the user type the name of the resource they are deleting (manual confirmation).\n\n#### Post-deletion flow\n\nAfter the user deletes an item, return to the page that lists the item deleted. Animate the removal of the item from the list or page and present a success notification.\n\nIf the deletion fails, raise a notification to tell the user that deletion failed. Send a second notification on another communication channel, like email, if possible. Animate the item back onto the page if possible.\n\n### Errors\n\nErrors occur when an action or process does not succeed. Error notifications can occupy full pages, form fields, notifications (toast, inline, etc.), and modals. Ultimately, all should provide context of what happened and a clear path to continue.\n\n\n\n\n\n\n\n
\n\nConsider redirecting the user to a previous state, a support page, or by offering helpful recommendations. Be honest and helpful.\n\nSome components, like text input and form field errors, are quite small and require more thoughtful approaches to the space and placement of error handling. Consider inline error notifications for these instances.\n\n#### Copy guidelines\n\nBe brief, honest, supportive, and human. Explain what happened and what can the user do to resolve the error.\n\nFor full-page and large modals, keep error messages no longer than three paragraph lines. For form errors, keep error messages no longer than two lines.\n\n### Remove\n\nThis action removes an object from a list or item; however, the object is not destroyed as a result of the action. Multiple objects can be removed at once.\n\n\n\n#### Hierarchy and placement\n\nRepresent remove as a button or `subtract` icon or glyph. The remove action is rarely the primary action on the page and should not be overly emphasized.\n\n#### Considerations\n\n- What are the implications of the add action for the user? Are there financial, access, or legal considerations?\n- This action can be confused with deleting.\n- A user may not have the correct permissions for this action.\n- Inform the user if the result is permanent.\n- How long will the action take? Seconds, minutes, hours, or days?\n- What should the user do if the removal fails?\n- Is this a single or bulk action?\n\n### Reset\n\nReset reverts values back to their last saved state. The last saved state includes the values stored the last time the user clicked or triggered **Apply**.\n\nReset is typically applied as a link.\n\n\n\n## Progressive actions\n\n\n\nAdd\nCopy\nEdit\nNext\nRefresh\n\n\n\n### Add\n\nAdd inserts an existing object to a list, set, or system. For example, adding a document to a folder.\n\n\n\n#### Hierarchy and placement\n\nRepresent add with a primary button, button with an icon, `add--glyph` or `add--outline` icon.\n\nDepending on the relevance of the add action on the page, the emphasis can be high, medium or low. For example, a high emphasis action should use a single prominent button that makes it clear that other buttons have less importance in the hierarchy.\n\n#### Considerations\n\n- What are the implications of the add action for the user? Are there financial, access, or legal considerations?\n- A user may not have the correct permissions for this action\n- Inform the user if the action is permanent\n- What timeframe will the action take (seconds, minutes, hours, days)?\n- What should a user do if the addition fails?\n- Is this a single or bulk action?\n\n### Copy\n\nCopy creates a new identical instance of the selected object(s) in a distinct destination.\n\nUse the `copy` icon with a confirmation \"copied\" tooltip appearing post-click.\n\n\n\n### Edit\n\nEdit allows data or values to be changed. Edit commonly triggers a state change to the targeted object or input item.\n\nOffer edit as an option in a menu, or as a button or `edit` icon.\n\n\n\n\n\n### Next\n\nNext advances the user to the next step in a sequence of steps, such as in a wizard.\n\nRepresent next with a button with icon or a standalone `forward` icon.\n\n\n\n### Refresh\n\nThis action reloads the view of an object, list, or data set when the displayed view has become unsynchronized with the source.\n\nUse the `refresh` icon or a button.\n\n\n","type":"Mdx","contentDigest":"b960c6fcf53c6d1199719dbd2ce37e8d","counter":1460,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Common actions","description":"Common actions are frequently used actions that appear across different components and workflows."},"exports":{},"rawBody":"---\ntitle: Common actions\ndescription: Common actions are frequently used actions that appear across different components and workflows.\n---\n\n\n\nCommon actions are frequently used actions that appear across different components and workflows. For platform consistency, these actions should only be applied in the ways described below.\n\n\n\n## Regressive actions\n\n\n\nCancel\nClear\nClose\nDelete\nErrors\nRemove\nReset\n\n\n\n### Cancel\n\nCancel stops the current action and closes the component or item. Warn the user of any negative consequences of stopping the action from progressing, such as data corruption or data loss.\n\nUse a secondary button or a link for cancel actions.\n\n\n\n### Clear\n\nClear removes data from a field or removes selections. Clear can also delete the contents of a document, such as a log. Typically, the default selection or value is reset for controls that have a default selection or value, such as radio buttons.\n\nUse the `x` icon on the right side of a field, item, or value.\n\n\n\n### Close\n\nClose terminates the current page, window, or menu. Close is also used to dismiss information, such as notifications.\n\nUse the `close` icon, which is typically placed on the upper right side of the element. Do not use close in a button.\n\n\n\n### Delete\n\nDelete destroys an object. Delete actions cannot be easily undone and are typically permanent. The user should be warned of the negative consequences of destroying an object, such as loss of data. Use either the `delete` or `trash can` icon, a danger button, or a danger option in a menu. A danger modal is used when a warning is needed to confirm an action.\n\n\n\n#### Non-dangerous deletion (~5% of cases)\n\nUse when it's trivial to undo deletion or re-create the item. Delete the item upon click or tap without further warning.\n\n#### Moderate danger deletion (~80% of cases)\n\nUse when an action cannot be undone or the item cannot be recreated easily. This pattern is also useful if you're deleting more than one thing.\n\nAsk for confirmation of the delete, with guidance about what will occur if they delete.\n\n#### High danger deletion (~15% of cases)\n\nUse when it would be very expensive or time-consuming to recreate an item. Also use if the action deletes a large number of items, or if other important items would be deleted as a result of the action.\n\nIn addition to presenting a dialog, have the user type the name of the resource they are deleting (manual confirmation).\n\n#### Post-deletion flow\n\nAfter the user deletes an item, return to the page that lists the item deleted. Animate the removal of the item from the list or page and present a success notification.\n\nIf the deletion fails, raise a notification to tell the user that deletion failed. Send a second notification on another communication channel, like email, if possible. Animate the item back onto the page if possible.\n\n### Errors\n\nErrors occur when an action or process does not succeed. Error notifications can occupy full pages, form fields, notifications (toast, inline, etc.), and modals. Ultimately, all should provide context of what happened and a clear path to continue.\n\n\n\n\n\n\n\n
\n\nConsider redirecting the user to a previous state, a support page, or by offering helpful recommendations. Be honest and helpful.\n\nSome components, like text input and form field errors, are quite small and require more thoughtful approaches to the space and placement of error handling. Consider inline error notifications for these instances.\n\n#### Copy guidelines\n\nBe brief, honest, supportive, and human. Explain what happened and what can the user do to resolve the error.\n\nFor full-page and large modals, keep error messages no longer than three paragraph lines. For form errors, keep error messages no longer than two lines.\n\n### Remove\n\nThis action removes an object from a list or item; however, the object is not destroyed as a result of the action. Multiple objects can be removed at once.\n\n\n\n#### Hierarchy and placement\n\nRepresent remove as a button or `subtract` icon or glyph. The remove action is rarely the primary action on the page and should not be overly emphasized.\n\n#### Considerations\n\n- What are the implications of the add action for the user? Are there financial, access, or legal considerations?\n- This action can be confused with deleting.\n- A user may not have the correct permissions for this action.\n- Inform the user if the result is permanent.\n- How long will the action take? Seconds, minutes, hours, or days?\n- What should the user do if the removal fails?\n- Is this a single or bulk action?\n\n### Reset\n\nReset reverts values back to their last saved state. The last saved state includes the values stored the last time the user clicked or triggered **Apply**.\n\nReset is typically applied as a link.\n\n\n\n## Progressive actions\n\n\n\nAdd\nCopy\nEdit\nNext\nRefresh\n\n\n\n### Add\n\nAdd inserts an existing object to a list, set, or system. For example, adding a document to a folder.\n\n\n\n#### Hierarchy and placement\n\nRepresent add with a primary button, button with an icon, `add--glyph` or `add--outline` icon.\n\nDepending on the relevance of the add action on the page, the emphasis can be high, medium or low. For example, a high emphasis action should use a single prominent button that makes it clear that other buttons have less importance in the hierarchy.\n\n#### Considerations\n\n- What are the implications of the add action for the user? Are there financial, access, or legal considerations?\n- A user may not have the correct permissions for this action\n- Inform the user if the action is permanent\n- What timeframe will the action take (seconds, minutes, hours, days)?\n- What should a user do if the addition fails?\n- Is this a single or bulk action?\n\n### Copy\n\nCopy creates a new identical instance of the selected object(s) in a distinct destination.\n\nUse the `copy` icon with a confirmation \"copied\" tooltip appearing post-click.\n\n\n\n### Edit\n\nEdit allows data or values to be changed. Edit commonly triggers a state change to the targeted object or input item.\n\nOffer edit as an option in a menu, or as a button or `edit` icon.\n\n\n\n\n\n### Next\n\nNext advances the user to the next step in a sequence of steps, such as in a wizard.\n\nRepresent next with a button with icon or a standalone `forward` icon.\n\n\n\n### Refresh\n\nThis action reloads the view of an object, list, or data set when the displayed view has become unsynchronized with the source.\n\nUse the `refresh` icon or a button.\n\n\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/patterns/common-actions/index.mdx"}}}}