Button

• Highest-priority actions
• Use once per section
• Examples: Submit, Confirm or Save

• Non-critical actions
• Examples: Back, Cancel, Edit or Add

• Tertiary actions
• Examples: View terms, Back or Close
• Group inside a Action Group for related actions

• Non-critical actions
• Examples: Back, Cancel, Edit or Add

• Tertiary actions
• Examples: View terms, Back or Close
• Group inside a Action Group for related actions

• Purpose: Neutral
• Examples: Close, Exit, Edit
• Use when purpose is neither constructive or distructive

• Highest-priority actions that are required to complete the user’s task
• Only used once per screen

• Represents a constructive action
• Examples: complete, approve, resolve, add etc.

• Represents actions that could have destructive effects on the user’s data
• Examples: delete or remove

• Examples: toolbar or in the meta slot of a card
• Clarify the purpose of the button using a tooltip
• Place ghost appearance buttons inside an action-group

The smaller size buttons (condensed and super-condensed) are useful when used inside other components (inside data-grid-cell or action-group for a toolbar) as they take up less space.