Framework Component Library

Button Toggle 

<button class="
		button_toggle
		button_bordered
				
	" data-js-swap="" data-swap-target="body">
    <span class="button_bordered_inner button_toggle_inner button_toggle_inner_default">
        <span class="button_bordered_label button_toggle_label">
            Open
        </span>
        <span class="button_bordered_icon button_toggle_icon" aria-hidden="true">
            <svg class="icon icon_plus">
                <use href="/images/icons.svg#plus" />
            </svg>
        </span>
    </span>
    <span class="button_bordered_inner button_toggle_inner button_toggle_inner_active">
        <span class="button_bordered_label button_toggle_label">
            Close
        </span>
        <span class="button_bordered_icon button_toggle_icon" aria-hidden="true">
            <svg class="icon icon_close">
                <use href="/images/icons.svg#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'
		}
	} %}
#}

<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="{{ classes.base }}_inner button_toggle_inner button_toggle_inner_default">
		{% if default.title %}
			<span class="{{ classes.base }}_label button_toggle_label">
				{{ default.title }}
			</span>
		{% endif %}
		{% if default.icon %}
			<span class="{{ classes.base }}_icon button_toggle_icon" aria-hidden="true">
				{{ icon(default.icon) }}
			</span>
		{% endif %}
	</span>
	{% if active.title or active.icon %}
		<span class="{{ classes.base }}_inner button_toggle_inner button_toggle_inner_active">
			{% if active.title %}
				<span class="{{ classes.base }}_label button_toggle_label">
					{{ active.title }}
				</span>
			{% endif %}
			{% if active.icon %}
				<span class="{{ classes.base }}_icon button_toggle_icon" aria-hidden="true">
					{{ icon(active.icon) }}
				</span>
			{% endif %}
		</span>
	{% endif %}
</button>

No notes defined.