Button
Buttons trigger an action. They describe the action using text, an icon, or a combination of both.
Anatomy
A) Text Label B) Container C) Icon (Optional)
Behavior
Buttons have up to four interaction states: • Default • Hover • Active • Disabled
Hierarchy
Primary Buttons
When working with numeric values generally they should be right-aligned to provide ease of scanning and comparing. Column headers follow the alignment of the data. Numbers that do not need comparing, such as phone numbers, can be left aligned.
Secondary Buttons
Secondary buttons Secondary buttons should be used to represent secondary calls to action. They have less visual weight when compared to primary buttons.