Switch

Based on Material 3 switch specifications

        
        <button class="m3-switch">
          <span class="m3-switch--handle"></span>
        </button>

          
          <button class="m3-switch">
            <span class="m3-switch--handle"></span>
            <span class="m3-switch--icon m3-sym">check</span>
          </button>

To always show icon regardless of the state, add m3-switch__persistent-icon modifier class.

        
        <button class="m3-switch m3-switch__persistent-icon">
          <span class="m3-switch--handle"></span>
          <span class="m3-switch--icon m3-sym">check</span>
        </button>

Last modified: 27 February 2024