Primary Button

Primary buttons are clearly distinguishable as the call-to-action for the user.

They include Inactive, Active, Hover, Click, and Selected states.

Toggle, Multimode, and Slider Buttons

Toggle switches have both modes visible to the user, either on or off.

They include Inactive, Active, Hover, and Click/Move states.

Multi-mode selectors go beyond a binary choice and have three or more options.

They include Active, Hover, and Click/Move states (No Inactive).

Sliders typically use a linear design, and they provide context to the user on their overall range and current status of motion.

They include Active, Hover, and Click/Move states (No Inactive)

Radio Buttons, Checklists, and Toolbars

Radio buttons have a list of 3 to 5 items but only one item can be selected at any time. If a user selects a second item, the first item is deselected.

They include an unselected state, a subtle hover state, and a selected state.

Checkboxes have a list of 4 or more items, multiple can be selected, and the user may click an item a second time to deselect it. The user can sometimes select any number of items, but sometimes the user must select a specific amount.

They include an unselected state, a subtle hover state, and selected states.

Toolbars are simple menus consisting of icons and sometimes text labels. Only one item from the list can be selected from the list at one time, and typically one item is selected by default.

They include an unselected state for each icon, a subtle hover state, and a selected state.