Controls

Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.

Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a span with class .title-label.

Major buttons allow emphasis to be placed on a button. Use this on a single button when the user has a small number of choices, and one choice is a normal default. Just add .major to any element that uses .s-button.

Use button sets to connect buttons that have related purpose or functionality. Buttons in a set round the outer corners of only the first and last buttons, any other buttons in the middle simply get division spacers.

To use, simply wrap two or more .s-button elements within .l-btn-set.

When a button is presented within another control it may be advantageous to avoid visual clutter by using an icon-only button. These type of controls present an icon without the "base" of standard buttons. Icon-only buttons should only be used in a context where they are clearly an interactive element and not an object-type identifier, and should not be used with text.

Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.

The basic structure is a label with a checkbox-type input and an em element inside. The em is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the label allows the label itself to act as a clickable element.

Radio buttons use the same technique as checkboxes above.

Similar to checkboxes and radio buttons, selects use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms. The select element is wrapped by another element, such as a div, which acts as the main display element for the styling. The select provides the click and select functionality, while having all of its native look-and-feel suppressed.

Local controls are typically buttons and selects that provide actions in close proximity to a component.

These controls can optionally be hidden to reduce clutter until the user hovers their cursor over an enclosing element. To use this approach, apply the class .has-local-controls to the element that should be aware of the hover and ensure that element encloses .h-local-controls.