Add or Create
Add inserts an existing object to a list, set or system. For example, adding a new social profile.
Create produces and insert a new object to a list, set or system. For example, creating content in Publisher.
Hierarchy and placement
There are three degrees of emphasis depending on the importance of the add action on the page: high, medium or low. For example, a high emphasis action uses a single primary button placed in the upper right-hand side, while all other buttons secondary.
Cancel
Cancel prevents the action in progress and closes the component or item. Always warn the user in case of any collateral consequences such as data corruption or data loss.
For cancel actions in a ghost variant, use a secondary button. The button is positioned on the left side and is usually paired with the primary action.
Close
Close terminates the current page, dialog or menu. Close is also used to dismiss information such as notifications.
Using the button with a close icon
- For information banners, the typical placement is on the upper right side of the element
- For modal dialogs, the button is placed outside of the box on the upper right side of the element
- For panels, the button is placed outside of the box on the upper left side of the element
- For full-screen dialogs, the button is typically placed inside of the box on the upper left side of the element
Using the button with a label
- Use a close instead of cancel button if the user's previous actions are immediately done, eg. advanced options in a search
Clear
Clear removes selections or data from a field. Clear also deletes the contents in a document, such as a log. The default selection or value is reset for controls with a default selection or value, such as radio buttons.
Use the button with a close icon on the right side of a field or a close icon on the right side of an item or value.
Delete
Delete destroys an object. Delete actions are typically permanent or can't be easily undone.
Always warn the user of any collateral damage if an object is destroyed, such as loss of data. Use either the delete or trash icon, a danger button, or a danger option in a menu.
Discover the differences between delete and remove and what type of dialogs you can use.
Disconnect
Disconnect destroys a connection between data. Disconnect actions can be easily undone by reconnecting.
This is typically used for a relation between the platform and connected data sources, such as social profiles.
Edit
Edit allows the user to change data or values. Edit usually triggers a state change to the targeted object or input item.
Use edit as an option in a menu or as a button with an edit icon.
Errors
Errors occur when an action or process does not succeed. Error notifications can occupy full pages, form fields, notifications and modals.
Error notifications should explain the context of what happened to the user and demonstrate a clear path to continue.
Make sure the error message is straightforward and supportive. For example, consider offering recommendations, or redirecting the user to a previous state or support page.
Some components, such as text input and form field errors, are relatively small and demand a more considered approach to how the space and placement of the error are handled. For these instances, use inline error notifications.
Remove
Remove is distinct from delete, as the removed object is not destroyed. The object is removed from a list or item. Multiple objects can be removed at once.
Discover the differences between delete and remove and what type of dialogs you can use.