Actions

Are components that perform an "action" when clicked, tapped.

Variants

Two main variants are used depending on the visual emphasis required.

Variant	Description
Flat	Flat buttons have a transparent background. Displaying only the label. The normal Dimensions will be preserved to have a sufficient clickable/tapable area
Standard	Have a contrasting background increasing the Visual Weight for the component

Common UX Elements

Element	Description
Button	The main element and clickable area
Caption	Short text describing the action that will be perform on click/tap; for example: Save, Cancel
Icon	Visual representation of the action, can used alone or along with the Caption

Status

An action can have the following status

Status	Description
Normal	The default state of the action. Using an Primary Action color
Hover	Light change of color/background color when cursor is hovering. Use a shade of the Primary Action color
Focused	Signal to the user the current button have the focus. Use a visual effect like glow or a visible border.
Active	Only when pressed. It should signal the action is been pressed. Use a shade of Primary Action color
Disabled	The action should be visually less prominent. It cannot be clicked or focused.

Actions Priority

When two or more Actions are displayed together, the most important action will be the Standard type and all others are Flat.

1. Multiple buttons on the Action Bar

   In this case there is no most important action, so all actions are Flat
   

   As well when all the actions are under the Actions Menu
   

2. Save/Cancel

   In this case the "Save" action is most important so it will use the Standard type
   

   Same if the Save/Cancel combination is uses on a Modal
   

   When there is more than two actions for only one can be the most important
   

Visuals + Sizes + Spacing