Ferguson has 3 button styles in 3 sizes with 4 states each.
Styles
The primary button style is used to designate the main action that the user would be making in a view.
For pages with multiple equally important buttons, they would all use the secondary button style.
The flat button style is used when we don’t want to draw unnecessary attention to a button.
Example:
Inspect Link:
https://ferguson.invisionapp.com/d/main#/console/16702546/356853318/inspect
Sizes
Large
Uses a large inset-squish for the padding (modified so that a single-line button has a height of 48px).
- If the button has an icon in it, it would use a large inset for the padding
Medium (default)
Uses a medium inset-squish for the padding (modified so that a single-line button has a height of 40px).
- If the button has an icon in it, it would use a medium inset for the padding
Small
Uses a small inset-squish for the padding (modified so that a single-line button has a height of 32px).
- If the button has an icon in it, it would use a small inset for the padding
States
Default
Utilizes the same css styles inherited by the Style of the button.
Hover
Has a 6%-opacity black overlay over the button background.
Pressed
Has a 12%-opacity black overlay over the button background.
Disabled
Has different styles depending on the Style of button used. Reference: https://ferguson.invisionapp.com/d/main#/console/16702546/356853318/inspect