...

State	Icon	Text	Comment
Regular
Hover
Active
Selected
Disabled
Focused
Focused, Hover
Focused, Active
Focused, Disabled

Interaction

Single Selection

Clicking an unselected option in the group should:

• change that option to Selected.

• automatically deselect the previously-selected button, which is then viewed as Regular.

Multiple Selection

• Clicking an option will select it regardless to other selected items.

• Clicking the option again deselects it.

• In this mode the user can deselect all items.

Best practices

Use:

• when there are only 5 or fewer options.

• where there’s enough room to fit the options within the UI.

• when you want to switch between alternative views of the same content.

• when the options are closely related in context or content.

...

• if there are more than 5 option → use a Drop down menu or Radio buttons.

• if there is limited room to fit the options within the UI → use a Drop down menu.

• if the options aren't closely related in context or content → use Tabsa collection of Buttons (toolbar).

General

• Try to avoid using a selector for only two options.

Accessibility Compliance

...