Guideline for destructive buttons
Buttons are used to help the users carry out important actions. There are four types of buttons: primary, secondary, tertiary and destructive. Use of buttons, labels and their types should be consistent throughout the entire application. For more information on button labels, see the section on buttons in Guidelines for content writing.
Types
Primary
Primary buttons are the main call-to-action (CTA) on a page. They are strategically positioned and visually distinct to help guide users toward the important action or way forward on a page. Because of this, there should only ever be one primary button per page.
For a detailed explanation of how to use primary buttons, please see the Guidelines for primary buttonsarticle.
Secondary
Secondary buttons are used for alternative, less important actions such as "previous/next" buttons in a form or the “cancel” button in a modal. They may be used more then once per page and are often paired with primary buttons.
For a detailed explanation of how to use secondary buttons, please see the Guidelines for secondary buttons article.
Tertiary
Tertiary buttons are used for reduced-importance actions that are not essential to the main task, such as "Edit", “Favorite” and "Delete". Tertiary buttons may be used more than once per button group and more than one tertiary button can be used on a single page.
For a detailed explanation of how to use secondary buttons, please see the Guidelines for tertiary buttonsarticle.
Destructive
Destructive buttons should be used sparingly to warn users of irreversible actions such as deleting data or canceling a request. Their use is meant to help further communicate to the user the importance of considering whether to proceed with the action they represent.
...
Icons can enhance the usability of buttons, making it easier to scan a page. They should only be used for common actions like save, print, or delete. It's important to choose globally recognized icons to ensure clarity. Research has shown the solid or filled icons are easier for users to recognize.
Icons should always be placed on the left of button text. Maintain a consistent button size of around 24px by 24px, with 12px padding. A great resource for free icons is the FontAwesome icon library. Another popular icon family is from Google’s Material Design. You can use other icon font families as long as the symbol clearly indicates the action. If in doubt, test with users or ask the design community.
...