A toggle is a switch between two opposing values that affect the state of content or a view. Toggles are used to help people manage the state of something and are most commonly found in options or preferences menus.

When designing a toggle, use visual cues such as movement and color to communicate its current state to users. Ensure that toggles always have clear label text to further clarify its binary action and the state of the object being affected. Labels should also describe the underlying mechanism so that users can understand the behavior of the toggle.

The mat-button-toggle> element supports the aria-pressed property to convey toggle state, and you can attach a corresponding label using aria-label or aria-labelledby. You can use the MatButtonToggleGroup element to encapsulate multiple toggles and apply role=”group” to communicate their collective meaning.

Toggles are ideal for use in situations where a product team wants to test or analyze the effect of a change on its user base before it’s widely deployed. They can be used for anything from a new type of workflow to a feature that is only exposed to a small group of users.

Savvy teams view the number of Feature Toggles in their codebase as inventory that comes with a carrying cost, so they’re proactive about removing toggles that are no longer needed. Some teams even put “expiration dates” on their toggles to ensure they get removed before they’re forgotten about and cause unwanted regressions in production.