Action buttons are used when there are actions that support a page or component, but they are not considered high enough priority enough to draw the users attention to them. They have the least amount of visual pronunciation because interacting with them will not effect the app or page and they are not to take away from the page's main purpose.
Visual Examples
Usage
Action buttons should be used when there are actions that need to be on a page, but they are not supposed to be the main focus of the page.
Multiple action buttons can be used throughout a main app page or an app component
Principles
Subtle: Action buttons are purposefully designed to take less prominence on a page.
Identifiable: Action buttons should indicate that they can trigger an action.
Findable: Although they are less in priority compared to Primary buttons, Action buttons should be easy to find and included near or within related app components when applicable.
Priority
Low/Non-critical
Behavior
Text label on action buttons should be representative of what action will occur with user interaction
Icons used with text labels should help signify action that will occur
Action buttons labels should be short and clear verbs
Recommendations
Icons display before the text label to help increase understanding around the button
Use primary actions when there is a main action you are trying to get users to take, however, if the action is more of an optional choice a user has, use action buttons
Hover states of action buttons will reveal container of the button
There can be multiple action buttons on a page or within a component
Dos and Don'ts
Content
Make action buttons contextual to the situation at hand.
Use specific language when possible.
EX: use"Download Reports" as oppose to just"Download".
Definition
Usage
Principles
Priority
Behavior
Recommendations
Dos and Don'ts
Content
Accessibility Requirements & Resources
Mountaineer Design System Link
Related Components