Buttons

A control that invokes an action when pressed. There are two types of a button: text and icon which are available in two sizes, large and small.

Behaviours & States

Behaviour

Icon buttons are great for minimalist designs, but only if the icon can convey the correct meaning to the user. Icon buttons can have an optional caption. The caption can help describe the funtion of the button. Captions can be placed top, right, bottom or left side of the icon button. 

 

Buttons are available in two size; large and small. The large button should be used sparingly and for primary actions because of its attention grabbing nature. The small button is used for all other actions and multiple instances can be used without overwhelming the user. The small size button is the button used in panel headers.

 

Toggle buttons have the ability to reflect an on/off state. The "selected" state indicates an option is on where the "normal" state is off.

 

Focusing on and then pressing a button will result in either the execution of an action or toggling of state (upon release of the button).

States

Button can be one of these states at any given time:

  • Normal

  • Focus

  • Selected

  • Deactivated

 

Normal (up/unpressed) state is used when there has been no interaction with the button but it is available for use.

 

Focus (hover) state is when the button is hovered over or has the focus from 5-way navigation. This state may be animated.

 

Selected (down/pressed) state is when the button is not focused on, but resulted in an action which changes state. Toggle in an on state would be in the selected state.

 

Deactivated (disabled) is when the user cannot use the button. 

Sizing

Large Button, Small Button:

For Text buttons, button width will automatically scale to fit text, however there is a default minimum (130px for small button, 180px for large button) and a maximum (300px) width. Buttons may have a fixed width if you want consistent sizes. When text exceeds the button width (either fixed or the max size), the text will truncate with elipsis. When in the focus state, the text will marquee to show the full string.

 

Large buttons should be used for a primary action and used sparingly as they are attention grabbing. The small button is prefered for most actions. Small buttons should be exclusively used inside panel headers.

 

Icon Button:

Icon buttons are a fixed size; images should be sized appropriately to ensure they are not clipped. Large button icons area is 45 x 45px, small button icon area is 32 x 32px.

Illustration

Large Button (85 pixels high, width variable)

Large_Buttons.png

 

Small Button (60 pixels high with an 80 pixel target area, width variable)

Small_Buttons.png

 

Large Icon Button (85 pixels high, width variable)

Large_Icon_Button.png

 

Small Icon Button (60 pixels high with an 80 pixel target area)

Small_Icon_Button.png

 

Optional Captions for Buttons:

Optional_Captions_for_buttons.png

 

Icon Sprites Specifications:

Icon_Sprites_Specifications.jpeg

 

Navigation