Nav open / close arrow

Overview

While several Fabric components may appear similar, the differences between Fabric's buttons, toggles, and indicators is important for clearly communicating the behavior of a design, and ensuring consistency across the products.

Buttons

Buttons are components that, when clicked, perform an action or link to another URL. When buttons are in their disabled state, their text label may be used to indicate the current state of a process or condition, e.g. "Saving." Active buttons should not be used to indicate a current state, unless it also performs an action when clicked, and the label accurately describes what that action is.

Buttons Include:

Toggles

Toggles are clickable components that allow for selecting between binary states for a particular value. Most toggles set a single value as either selected/deselected, but certain components (e.g. segmented controllers, radio buttons) allow for toggling between exactly one of n selections.

Toggles Include:

Indicators

Indicators are components whose primary purpose is to communicate information or the state of a condition. Indicators may be interactive (e.g. triggering peeks or tooltips), however, they never trigger actions or selections.

Indicators Include:

Test Your Knowledge!

Last Updated

Oct 10, 2019