Example
A checkbox element (hidden) that looks like a button. Contents changes depending on whether the button is checked or unchecked.
A checkbox element (hidden) that looks like a button. Contents changes depending on whether the button is checked or unchecked.
<label class="c-label c-label--checkbox" id="undo_btn">
<input class="c-input--checkbox c-checkbox--btn | u-hidden" id="radio_btn" type="checkbox" name="undo_btn">
<span class="c-btn c-btn--tertiary">
<svg class="c-icon | u-tc-negative | is-on" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9.993 5.91-.252 6.545m-3.482 0-.252-6.546m7.25-2.334c.248.038.496.078.743.12m-.743-.12-.777 10.097a1.636 1.636 0 0 1-1.632 1.51H5.152a1.636 1.636 0 0 1-1.632-1.51L2.743 3.575m10.514 0a34.988 34.988 0 0 0-2.53-.289m-7.984.289a31.72 31.72 0 0 0-.743.12m.743-.12c.84-.127 1.683-.223 2.53-.289m5.454 0V2.62c0-.858-.662-1.574-1.52-1.6a37.79 37.79 0 0 0-2.414 0c-.858.026-1.52.743-1.52 1.6v.666m5.454 0a35.465 35.465 0 0 0-5.454 0"></path>
</svg>
<span class="u-hidden | is-on">Delete</span>
<svg class="c-icon | u-tc-primary | is-off" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 10 2 6m0 0 4-4M2 6h8a4 4 0 0 1 0 8H8"/>
</svg>
<span class="u-hidden | is-off">Undo</span>
</span>
</label>