• First is a button with all the default settings. Should have hover state, focus state, and down state.
• Second button is same as the first, but disabled. Should not change state when hovered over or clicked on. Should not receive focus when tabbing through page.
• Third button is "primary" — denotes most common action. Should look different from the first button. May have its own distinct hover- and down-state styles, but can also re-use the styles for the regular button.
• Fourth button is a toggle — each click switches the button between an active state and an inactive state. In the inactive state, the button is identical to an ordinary button. The active state should look sufficiently different so that the user can intuit that the button is a toggle.

A test to ensure that buttons made from different HTML elements are styled to look as similar as possible.

In all the above groups, ensure the following:

• For buttons with icon(s) and text, one icon should appear to the left of the text, without any overlap between the icon and the text.
• For buttons with two icons and text, the second icon should appear to the right of the text, without any overlap between the icon and the text.
• For buttons with icon(s) and text, the icon and text should be aligned similarly on the vertical axis.
• For buttons with icon(s) and no text, the icon(s) should be centered inside the button.

In the "disabled" group, ensure the following:

• The icon should change color if the aesthetics of the theme imply it. For instance, in the default theme, the icon and the button text are the same color in the ordinary state, and should therefore be the same color in the disabled state.
• Because buttons can have icons without text, themes should not rely too heavily on the text to convey the disabled state. (In other words: ensure the disabled icon-only buttons above look sufficiently disabled.)

In the "toggle" group, ensure the following:

• The icon should change color in the active state if the aesthetics of the theme imply it. (In the default theme, the icon should change color in the active to match the text.)

S2.UI.Button can turn an <input type="checkbox" /> into a button with a "active" state and an "inactive" state.

• The check box itself should not be visible.
• Clicking on the button should switch the button from its ordinary state to its active state. Clicking again should switch the button back to its ordinary state.

A basic S2.UI.ButtonSet with two button elements.

• The buttons should appear grouped. A UI theme may signify this grouping in whatever way seems best. (In the default theme, the buttons appear "joined" at the spot where they meet; this spot should not have any rounded corners or empty space.)

A ButtonSet with two radio buttons.

• The buttons should behave like radio buttons. That means:

  • There should not be more than one in the "active" state at once.
  • An active button should not change state when it is clicked on.