Buttons (UI Standards)

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