Framework Component Library

Button 

<!-- Filled -->
<button class="
		button_filled
				
	">
    <span class="button_filled_inner">
        <span class="button_filled_label">Button Text</span>
        <span class="button_filled_icon" aria-hidden="true">
            <svg class="icon icon_caret_right">
                <use href="/images/icons.svg#caret_right" />
            </svg>
        </span>
    </span>
</button>


<!-- Filled White -->
<button class="
		button_filled
					button_filled_white
				
	">
    <span class="button_filled_inner">
        <span class="button_filled_label">Button Text</span>
        <span class="button_filled_icon" aria-hidden="true">
            <svg class="icon icon_caret_right">
                <use href="/images/icons.svg#caret_right" />
            </svg>
        </span>
    </span>
</button>


<!-- Filled Large -->
<button class="
		button_filled
					button_filled_large
				
	">
    <span class="button_filled_inner">
        <span class="button_filled_label">Button Text</span>
        <span class="button_filled_icon" aria-hidden="true">
            <svg class="icon icon_caret_right">
                <use href="/images/icons.svg#caret_right" />
            </svg>
        </span>
    </span>
</button>


<!-- Bordered -->
<button class="
		button_bordered
				
	">
    <span class="button_bordered_inner">
        <span class="button_bordered_label">Button Text</span>
        <span class="button_bordered_icon" aria-hidden="true">
            <svg class="icon icon_caret_right">
                <use href="/images/icons.svg#caret_right" />
            </svg>
        </span>
    </span>
</button>


<!-- Bordered Large -->
<button class="
		button_bordered
					button_bordered_large
				
	">
    <span class="button_bordered_inner">
        <span class="button_bordered_label">Button Text</span>
        <span class="button_bordered_icon" aria-hidden="true">
            <svg class="icon icon_caret_right">
                <use href="/images/icons.svg#caret_right" />
            </svg>
        </span>
    </span>
</button>


<!-- Text -->
<button class="
		button_text
				
	">
    <span class="button_text_inner">
        <span class="button_text_label">Button Text</span>
    </span>
</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: ''
	} %}
#}

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

No notes defined.