Framework Component Library

Button Toggle 

<button class="
		button-toggle
		button-bordered
 				" data-js-swap="" data-swap-target="body">
    <span class="
		button-toggle__inner
		button-toggle__inner--default
		button-bordered__inner
	"> <span class="button-toggle__label button-bordered__label">Open</span>
        <span class="button-toggle__icon button-bordered__icon" aria-hidden="true">
            <svg class="icon icon--plus">
                <use href="/images/icons.svg?1.0.0#plus" />
            </svg>
        </span>
    </span> <span class="
			button-toggle__inner
			button-toggle__inner--active
			button-bordered__inner
		">
        <span class="button-toggle__label button-bordered__label">Close</span>
        <span class="button-toggle__icon button-bordered__icon" aria-hidden="true">
            <svg class="icon icon--close">
                <use href="/images/icons.svg?1.0.0#close" />
            </svg>
        </span>
    </span>
</button>
 
{#
	{% include '@partial-button-toggle' with {
		classes: {
			base: 'base_class',
			modifiers: [],
			utility: ''
		},
		id: null,
		attributes: {
			'attribute': 'value'
		},
		default: {
			title: 'Open',
			icon: 'plus'
		},
		active: {
			title: 'Close',
			icon: 'close'
		}
	} only %}
#}

{% set separator = '__' in classes.base ? '-' : '__' %}

<button
	class="
		button-toggle
		{{ classes.base }}
 		{% for modifier in classes.modifiers %}
 			{{ classes.base ~ '--' ~ modifier }}
 		{% endfor %}
		{{ classes.utility -}}
	"
	{% if id %}
		id="{{ id }}"
	{% endif %}
	{% for attribute, value in attributes %}
		{{ attribute }}="{{ value }}"
	{% endfor %}>
	<span class="
		button-toggle__inner
		button-toggle__inner--default
		{{ classes.base ~ separator ~ 'inner' }}
	">
		{% if default.title %}
			<span class="button-toggle__label {{ classes.base ~ separator ~ 'label' }}">
				{{- default.title -}}
			</span>
		{% endif %}
		{% if default.icon %}
			<span
				class="button-toggle__icon {{ classes.base ~ separator ~ 'icon' }}"
				aria-hidden="true"
			>
				{{ icon(default.icon) }}
			</span>
		{% endif %}
	</span>
	{% if active.title or active.icon %}
		<span class="
			button-toggle__inner
			button-toggle__inner--active
			{{ classes.base ~ separator ~ 'inner' }}
		">
			{% if active.title %}
				<span class="button-toggle__label {{ classes.base ~ separator ~ 'label' }}">
					{{- active.title -}}
				</span>
			{% endif %}
			{% if active.icon %}
				<span
					class="button-toggle__icon {{ classes.base ~ separator ~ 'icon' }}"
					aria-hidden="true"
				>
					{{ icon(active.icon) }}
				</span>
			{% endif %}
		</span>
	{% endif %}
</button>

No notes defined.