Add to Basket

Open in Figma View all renders 
<label class="add-to-basket" for="add-to-basket">
    <input id="add-to-basket" name="add-to-basket" type="checkbox">
    add to basket
    <span class="material-symbols-rounded" aria-hidden="true">check</span>
</label>
<label class="add-to-basket" for="add-to-basket-selected">
    <input id="add-to-basket-selected" name="add-to-basket-selected" type="checkbox" checked>
    add to basket
    <span class="material-symbols-rounded" aria-hidden="true">check</span>
</label>

Variations and modifiers

Add to basket sizes

'Add to basket' can be modified to be small or extra small - It is medium by default. Icons will size themselves relative to the buttons text size. 

<label class="add-to-basket add-to-basket--small" for="add-to-basket-unselected-small">
    <input id="add-to-basket-unselected-small" name="add-to-basket-unselected-small" type="checkbox">
    add to basket
    <span class="material-symbols-rounded" aria-hidden="true">check</span>
</label>
<label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
    <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox">
    add to basket
    <span class="material-symbols-rounded" aria-hidden="true">check</span>
</label>

Error State

Error state is replaced by the standard hover, active and checked states as appropriate. 

<label class="add-to-basket" for="add-to-basket-error">
    <input class="error" id="add-to-basket-error" name="add-to-basket-error" type="checkbox">
    add to basket
    <span class="material-symbols-rounded" aria-hidden="true">check</span>
</label>
<label class="add-to-basket" for="add-to-basket-error-checked">
    <input class="error" id="add-to-basket-error-checked" name="add-to-basket-error-checked" type="checkbox" checked>
    add to basket
    <span class="material-symbols-rounded" aria-hidden="true">check</span>
</label>