<toggle-switch src="/foo" data-csrf="TazmTVcqvf-P3PLvG8NImgnehNCVFro24-u6GDV1OQY0S7-02mAS_3bOtHiQrRnEiTApKpx68zSYsuIpx6NE8g" data-view-component="true" class="ToggleSwitch">
<span class="ToggleSwitch-statusIcon">
  <svg hidden="hidden" data-target="toggle-switch.errorIcon" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert-fill color-fg-danger">
    <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"></path>
  </svg>
  <span hidden="hidden" data-target="toggle-switch.loadingSpinner" data-view-component="true">
    <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="anim-rotate">
      <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
      <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
    </svg>    <span class="sr-only">Loading</span>
  </span>
</span>
<span aria-hidden="true" data-view-component="true" class="ToggleSwitch-status">
  <div data-view-component="true" class="ToggleSwitch-statusOn">On</div>
  <div data-view-component="true" class="ToggleSwitch-statusOff">Off</div>
</span>
<button data-target="toggle-switch.switch" data-action="click:toggle-switch#toggle" aria-pressed="false" data-view-component="true" class="ToggleSwitch-track">
  <div aria-hidden="true" data-view-component="true" class="ToggleSwitch-icons">
    <div data-view-component="true" class="ToggleSwitch-lineIcon">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true">
        <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" />
      </svg></div>
    <div data-view-component="true" class="ToggleSwitch-circleIcon">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true">
        <path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
      </svg></div>
  </div>
  <div data-view-component="true" class="ToggleSwitch-knob"></div>
</button></toggle-switch>