Pinecone

Button: Default (Inverse) 

<button id="button" type="button" class="button button--inverse"><svg class="icon icon--filter" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
        <use href="/images/filter.svg#filter" />
    </svg>
    <span class="button__label">Filter</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": "Filter",
  "labelVisuallyHidden": false,
  "className": false,
  "icon": "filter",
  "iconPosition": "start",
  "id": "button",
  "type": "button",
  "standAlone": false,
  "buttons": [
    {
      "name": "default",
      "disabled": false
    },
    {
      "name": "disabled",
      "disabled": true
    }
  ],
  "modifiers": [
    "inverse"
  ],
  "bodyClass": "has-blue-500-background-color"
}

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