Buttons

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.


Button Styles

We currently have two button styles available: Buttons (aka “standard buttons”) and Minimal Buttons.

Standard 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”.

Buttons

Minimal Buttons

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.

Minimal Buttons

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.


Button Types

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 Button

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.

Primary Buttons

Secondary Button

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.

Secondary Buttons

Subtle Button

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.

Subtle Buttons

Destroy Button

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).

Destroy Buttons

Success Button

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.

Success Buttons

Disabled Button

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.

Disabled Buttons

Cancel Button

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.

Cancel Buttons

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.

Cancel Buttons


Button Sizes

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.

Button Sizes

Small Buttons

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.

Anatomy of Small Button

Medium Buttons

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.

Anatomy of Medium Button

Large Buttons

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.

Anatomy of Large Button


Buttons with Icons

Icons can be a useful tool to enhance understanding, create visual interest and improve scanability.

Buttons with Icons

Regular Buttons with Icons

Icons in regular buttons are always positioned left of the button text, vertically centered with additional horizontal spacing.

Anatomy of Large Button

Anatomy of Medium Button

Anatomy of Small Button

Minimal Buttons with Icons

Icons in Minimal Buttons are positioned slightly above center relative to text.

Anatomy of Large Minimal Button

Anatomy of Medium Minimal Button

Anatomy of Small Minimal Button

Icon Buttons

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.

Anatomy of Large Icon Button

Anatomy of Large Icon Button

Anatomy of Large Icon Button


Implementation

For implementation of buttons styles for the web, visit Uniform UI. For buttons as React components, head to Uniform-UI-Components GitHub.


Uniform UI Elements

A Sketch file with with UI elements used to design Hudl interfaces.