Framework Component Library

Button: Text Large 

<button class="button-text
 		 			button-text--large
 				">
    <span class="button-text__inner"> <span class="button-text__label">Button Text</span>
    </span>
</button>
 
{#
	{% include '@partial-button' with {
		classes: {
			base: 'base_class',
			modifiers: [],
			utility: ''
		},
		id: null,
		attributes: {
			'attribute': 'value'
		},
		title: 'Button Text',
		icon: ''
	} only %}
#}

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

<button
	class="
		{{- 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 ~ separator ~ 'inner' }}">
		{% if title %}
			<span class="{{ classes.base ~ separator ~ 'label' }}">
				{{- title -}}
			</span>
		{% endif %}
		{% if icon %}
			<span
				class="{{ classes.base ~ separator ~ 'icon' }}"
				aria-hidden="true"
			>
				{{- icon(icon) -}}
			</span>
		{% endif %}
	</span>
</button>

No notes defined.