Merced Component Library

Button Toggle 

<button class="js--toggle _toggle ">
    <span class="_toggle_inner_default _toggle_inner">
        <span class="_toggle_label_default _toggle_label">Button Text</span>
    </span>
</button>
 
{#
	{% include '@component-button-toggle' with {
		class: 'button',
		title: 'Button Text',
		icon: 'menu',
		active_title: 'Active Button Title',
		active_icon: 'close',
		swap_target: '',
		swap_link: '',
		aria: '',
		nowrap: false
	} %}
#}
<button class="js-{{ class|replace({ '_': '-'}) }}-toggle {% if swap_target %}js-swap {% endif %}{{ class }}_toggle " {% if aria %} aria-label="{{ aria }}" {% endif %} {% if swap_target %} data-swap-target="{{ swap_target }}" {% endif %} {% if swap_link %} data-swap-linked="{{ swap_link }}" {% endif %}>
	<span class="{{ class }}_toggle_inner_default {{ class }}_toggle_inner">
		{% if nowrap == true %}
			<span class="{{ class }}_toggle_label_default {{ class }}_toggle_label">{{ title }}</span><span class="{{ class }}_toggle_icon_default {{ class }}_toggle_icon icon_nowrap" aria-hidden="true">&#xfeff;{{ icon(icon) }}</span>
		{% else %}
			<span class="{{ class }}_toggle_label_default {{ class }}_toggle_label">{{ title }}</span>
			{% if icon %}
				<span class="{{ class }}_toggle_icon_default {{ class }}_toggle_icon" aria-hidden="true">
					<i class="{% if ' ' not in icon %}fa-regular {% endif %}{{ icon }}"></i>
				</span>
			{% endif %}
		{% endif %}
	</span>
	{% if active_title %}
		<span class="{{ class }}_toggle_inner_active {{ class }}_toggle_inner">
			{% if nowrap == true %}
				<span class="{{ class }}_toggle_label_active {{ class }}_toggle_label">{{ active_title }}</span><span class="{{ class }}_toggle_icon_active {{ class }}_toggle_icon icon_nowrap" aria-hidden="true">&#xfeff;{{ icon(active_icon) }}</span>
			{% else %}
				<span class="{{ class }}_toggle_label_active {{ class }}_toggle_label">{{ active_title }}</span>
				{% if icon %}
					<span class="{{ class }}_toggle_icon_active {{ class }}_toggle_icon" aria-hidden="true">
						<i class="fa-regular {{ active_icon }}"></i>
					</span>
				{% endif %}
			{% endif %}
		</span>
	{% endif %}
</button>

No notes defined.