Pinecone

Button: Tag Button 

<ul class="tags">
    <li class="tag">
        <button type="button" class="button button--tag-button">
            <span class="button__label"><span class="screen-reader-text">Remove </span>Blockchain<span class="screen-reader-text"> from current filters</span></span><svg class="icon icon--close" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
                <use href="/images/close.svg#close" />
            </svg>
        </button>
    </li>
</ul>
 
{% if not standAlone %}<ul class="tags">{% endif %}
	<li class="tag">
		<button {% if id %}id="{{ id }}" {% endif %}type="button" class="button{% if modifiers %}{% for modifier in modifiers %} button--{{ modifier }}{% endfor %}{% 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>
	</li>
{% if not standAlone %}</ul>{% endif %}
 
{
  "label": "<span class=\"screen-reader-text\">Remove </span>Blockchain<span class=\"screen-reader-text\"> from current filters</span>",
  "labelVisuallyHidden": false,
  "className": false,
  "icon": "close",
  "iconPosition": "end",
  "id": false,
  "type": "button",
  "standAlone": false,
  "buttons": [
    {
      "name": "default",
      "disabled": false
    },
    {
      "name": "disabled",
      "disabled": true
    }
  ],
  "modifiers": [
    "tag-button"
  ]
}

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();