iuap-design/snippets/examples/switchButton/2-colorSwitch/widget.html

UI Framework Used For Enterprise.

<div class="example">
    <label class="u-switch u-switch-primary" for="switch-primary">
        <input type="checkbox" id="switch-primary" class="u-switch-input" checked="true">
        <span class="u-switch-label"></span>
    </label>
</div>

<div class="example">
    <label class="u-switch u-switch-success" for="switch-success">
        <input type="checkbox" id="switch-success" class="u-switch-input" checked>
        <span class="u-switch-label"></span>
    </label>
</div>

<div class="example">
    <label class="u-switch u-switch-info" for="switch-info">
        <input type="checkbox" id="switch-info" class="u-switch-input" checked>
        <span class="u-switch-label"></span>
    </label>
</div>

<div class="example">
    <label class="u-switch u-switch-warning" for="switch-warning">
        <input type="checkbox" id="switch-warning" class="u-switch-input" checked>
        <span class="u-switch-label"></span>
    </label>
</div>

<div class="example">
    <label class="u-switch u-switch-danger" for="switch-danger">
        <input type="checkbox" id="switch-danger" class="u-switch-input" checked>
        <span class="u-switch-label"></span>
    </label>
</div>

<div class="example">
    <label class="u-switch u-switch-dark" for="switch-dark">
        <input type="checkbox" id="switch-dark" class="u-switch-input" checked>
        <span class="u-switch-label"></span>
    </label>
</div>

</div>