Resonance Design System
☰

Toggle Buttons Toggle buttons are used to switch between views.

Toggle buttons are used to change the interface between one of several states. Only one toggleable view may be active at a time.

Table of contents

Usage guidelines

When to use
  • Use a toggle button when there are related views that may be switched between for the same screen or content.
How to use
  • The action triggered by clicking on a toggle button should occur immediately and on the same page.
  • Toggle buttons can have text, icons, or both.
  • Be cautious when using only icons. Consider using visually hidden text for people using screenreaders and other assistive devices. Also consider whether the icons you choose are going to be sufficient to communciate the meaning of the action to an average person.

Related Components

Split button

Use a split button instead of several buttons to make a single divergent selection from a set of tightly related actions.

Switch

Use a switch when there is only one option to turn on/off.

API

NameTypeDataDescription
valuepropertystringReturns value of toggle button (read only)

Events

EventDetailReturns
changedetail.valueValue of active button
detail.indexIndex of active button amongst all toggle buttons

Notes

Depends on:
Required DOM

Without these, the component will throw an error on render.

  • <res-button> - Multiple toggle buttons

History

VersionNote
0.15.0Add change event.
0.12.0Apply new spacing scale.
0.11.0Tweaks to accommodate new icon set.
0.7.0Web component refactor
0.6.0Fixed wonky focus bug.
0.5.0Refactored to work with new res-button and reflect design changes
0.3.0Initial build to spec.