Pinecone

Button: Toggle Button 

<button type="button" aria-pressed="false" class="button button--toggle"><span class="button__label">Toggle</span></button>
 
<button {% if id %}id="{{ id }}" {% endif %}type="{{ type }}" {% if ariaPressed %}aria-pressed="{{ pressed }}" {% endif %}class="button{% if modifiers %}{% for modifier in modifiers %} button--{{ modifier }}{% endfor %}{% endif %}{% if className %} {{ className }}{% endif %}">
	{%- if icon and iconPosition === 'start' %}{% render '@svg', {svg:icon}, true %}{% endif -%}<span class="button__label{{ ' screen-reader-text' if labelVisuallyHidden }}">{{ label | safe }}</span>{%- if icon and iconPosition === 'end' %}{% render '@svg', {svg:icon}, true %}{% endif -%}
</button>
 
{
  "label": "Toggle",
  "labelVisuallyHidden": false,
  "className": false,
  "icon": false,
  "iconPosition": "start",
  "id": false,
  "type": "button",
  "standAlone": false,
  "buttons": [
    {
      "name": "default",
      "disabled": false
    },
    {
      "name": "disabled",
      "disabled": true
    }
  ],
  "modifiers": [
    "toggle"
  ],
  "ariaPressed": true,
  "pressed": false
}

Toggle Button

The Toggle Button is a button with an aria-pressed attribute representing a boolean (true or false) value. To use a toggle button, the following JavaScript must be executed on the page where the component is used:

new PineCone.ToggleButton();