Styles
Height
Use a Tall button for more visual weight. Use only when a button stands alone with ample surroundingwhitespace.
Inverted
Buttons are inverted purely for aesthetic purposes. Often used when a full colored button looks too heavy for a light, roomy layout.
Disabled
Disable a button when the state of the view renders a button's action invalid. It is suggested that text accompanies the button explaining the reason for the disabled state.
Dropshadow
In stand-alone flows that users will use infrequently to complete important tasks, using perspective creates a more engaging experience. Use dropshadows on buttons only when the button stands alone as the only action.
Link
Provides the least visual weight. Typically used for the negative, less common action such as Delete or Cancel. Should also be associated with navigation, such as closing a modal.
Types
Primary
The most common button type, this should be used for navigational actions such as moving on to the next panel in a multi-step process, or opening a modal.
Secondary
For use when two actions are presented next to each other, and one should receive less visual attention.
Success
Whenever a final, successful action is being taken, use a Successful button.
Warning
Always use when a button's action is potentially dangerous or has a negative connotation. Never use for aesthetics alone.
Danger
Use when an action is dangerous, irreversable and destructive. A common example is a "Delete" action.
Action
Use when an action is discrete and not associated with navigation. Examples would be "Download", or "Filter".
Info
When a button is associated with static content that may provide help information, use the Info style.