Internetstiftelsen Styleguide

Toggle Button: Toggle Icon 

<button href="#" class="a-button a-button--icon" data-toggle-icon-target="myIcon" data-toggle-icon="arrow-forwards|check">
    <span class="a-button__text" id="myToggleTarget">Toggle icon</span>
    <svg class="icon a-button__icon" id="myIcon">
        <use xlink:href="#icon-arrow-forwards"></use>
    </svg>
</button>
 
<button href="#" class="a-button a-button--icon" {{#if toggle_icon}}data-toggle-icon-target="myIcon" data-toggle-icon="arrow-forwards|check"{{/if}} {{#if toggle_text}}data-toggle-text="{{#if external_target}}{{toggle_text_secondary_value}}{{else}}{{toggle_text_primary_value}}{{/if}}|Foo{{#if toggle_thrice}}|Boohoo{{/if}}" data-toggle-target="{{target_id}}"{{/if}}{{#if external_target}} aria-describedby="{{target_id}}" aria-controls="{{target_id}}" aria-live="assertive"{{/if}}{{#if aria_pressed}}aria-pressed="false"{{/if}}>
	<span class="a-button__text" {{#unless external_target}}id="{{target_id}}"{{/unless}}>{{toggle_text_primary_value}}</span>
	<svg class="icon a-button__icon" id="myIcon">
		<use xlink:href="#icon-arrow-forwards"></use>
	</svg>
</button>
{{#if external_target}}
<div id="{{target_id}}">I am an external target</div>
{{/if}}
 
{
  "target_id": "myToggleTarget",
  "external_target": false,
  "toggle_text": false,
  "toggle_text_primary_value": "Toggle icon",
  "toggle_icon": true
}

Toggle button

This component uses the textToggle.js and iconToggle.js files located here: /assets/js/