Buttons are an essential interaction element for interfaces. Hudl has a variety of button styles, types and sizes available for interface design. Here you will find documentation of our current suite of buttons.
We currently have two button styles available: Buttons (aka “standard buttons”) and Minimal Buttons.
Buttons are a standard and overt way to represent actions. Our standard buttons have background colors and rounded corners as affordances to look “clickable”.
Minimal Buttons are a subtler way to represent actions. Minimal Buttons can be a good option when standard buttons demand too much attention or when many actions exist in a single view.
Without the same affordances as standard buttons, context for Minimal Buttons is important to ensure the element appear interactive. This can be achieved by placing Minimal Buttons in an isolated space by using hairline dividers or white space.
We have six types of buttons available. Each button type has a specific purpose for use. As a general rule, hover states are a 25% tint and the active state is a 10% shade.
Primary Buttons are reserved for the strongest action on the view.
Primary Buttons are set in Electric for both regular button backgrounds and Minimal Button text.
The Secondary Button is a strong action but less strong than a primary action. Multiple Secondary Buttons can be used together and along side a primary action.
The regular Secondary Button background is set in Light Type at an 80% alpha transparency in both Light and Dark Environments. Minimal Secondary Button text is set in Light Type in the Light Environment and Bright Type in the Dark Environment.
The Subtle Button is an alternative to the Secondary Button when a Secondary Button would unintentionally dominate the interface. Multiple subtle buttons can be used together or along side a primary action.
The regular Subtle Button background is set in a custom grey (#9DA6AE) with a 20% alpha transparency in both Light and Dark Environments. However, the text is set in Light Type in the Light Environment and Bright Type in the dark environment.
The Minimal Subtle Button text is set in Subtle Type for both Light and Dark Environments.
The Destroy Button should only be used for destructive actions such as the final step before deleting information. The Destroy Button is very strong, demands attention and should be used with caution.
The Destroy Button hover for both regular button backgrounds and Minimal Button text is a custom red (#FF4A33).
The Success Button should only be used as a temporary state representing a successful action.
The regular Success Button background and Minimal Success Button text are set in Success (green). Note: White type on the Success color (green) does not pass accessibility standards.
The Disabled Button can be used to represent a possible button action that is currently unavailable do to the state of the view.
Inoperable buttons can cause frustration and should be used with caution. The Disabled Button should only be used when the existence of an inoperable button brings value by representing the unavailable use.
The regular Disabled Button text is set in Ink and background set in Nonessential (LE) with the entire button set at a 20% opacity. The Minimal Disabled Button text is set in Ink the Light Environment and White in the Dark Environment with a 20% opacity.
Hover and cursor changes should be removed from Disabled Buttons as they are interactive affordances.
Using the Cancel Button is the only time a Minimal Button should be grouped with a standard button. The Cancel Button should always be furthest left of a right justified button group and set in the same size as the other button(s) in the group.
The Cancel Button is only available as a Minimal Button. Cancel is also the only Medium or Small Button set in Regular weight type.
The Cancel Button is set in Nonessential (LE) in the Light Environment and Nonessential (DE) in the Dark Environment.
There are three sizes of buttons available: Small, Medium and Large. Appropriate size is determined by view density and the buttons position in the view hierarchy. Multiple sizes should never placed adjacent to one another in a group as associated actions.
Small Buttons are ideal for denser interfaces or when the button actions are secondary to page content. Small Buttons are set at 14px in a Bold typeface, top/bottom padding of 8px, left/right padding of 16px and have a 3px corner radius.
Medium Buttons are the default button size and should work for many cases. Medium Buttons are set at 16px in a Bold typeface, top/bottom padding of 12px, left/right padding of 20px and have a 4px corner radius.
Large Buttons are a strong call to action. They are ideal in sparse interfaces and very strong actions. Large Buttons are set at 18px in a Regular typeface, top/bottom padding of 18px, very generous left/right padding of 40px and have a 5px corner radius.
Buttons with Icons
Icons can be a useful tool to enhance understanding, create visual interest and improve scanability.
Regular Buttons with Icons
Icons in regular buttons are always positioned left of the button text, vertically centered with additional horizontal spacing.
Minimal Buttons with Icons
Icons in Minimal Buttons are positioned slightly above center relative to text.
In cases where visual efficiency is important and icon meaning is easily implied, icons can be used alone (without text) as a button.
Icon Buttons can have the same button affordances as regular buttons, but without the text label or be simply an icon with the Minimal Button style. Minimal Icon Buttons should be used carefully so the context (color, spacing, position in layout) promotes action.
A Sketch file with with UI elements used to design Hudl interfaces.