Buttons
#
Green {% include 'components/buttons/green' %}
#
HTML
<a href="#" class="button button--green">Link as a button</a>

<button class="button button--green" type="input">Button as a button</button>
Twig
<a href="#" class="button button--green">{{ button_one }}</a>
<button class="button button--green" type="input">{{ button_two }}</button>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
Transparent {% include 'components/buttons/transparent' %}
#
HTML
<div class="element-bg">
    <a href="#" class="button button--transparent">Link as a button</a>

    <button class="button button--transparent" type="input">Button as a button</button>
</div>
Twig
<div class="element-bg">
	<a href="#" class="button button--transparent">{{ button_one }}</a>
	<button class="button button--transparent" type="input">{{ button_two }}</button>
</div>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
White {% include 'components/buttons/white' %}
#
HTML
<div class="element-bg">
    <a href="#" class="button button--white">Link as a button</a>

    <button class="button button--white" type="input">Button as a button</button>
</div>
Twig
<div class="element-bg">
	<a href="#" class="button button--white">{{ button_one }}</a>
	<button class="button button--white" type="input">{{ button_two }}</button>
</div>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
Primary {% include 'components/buttons/primary' %}
#
HTML
<a href="#" class="button">Link as a button</a>

<button class="button" type="input">Button as a button</button>
Twig
<a href="#" class="button">{{ button_one }}</a>
<button class="button" type="input">{{ button_two }}</button>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
Secondary {% include 'components/buttons/secondary' %}
#
HTML
<a href="#" class="secondary-button">Link as a button</a>

<button class="secondary-button" type="input">Button as a button</button>
Twig
<a href="#" class="secondary-button">{{ button_one }}</a>
<button class="secondary-button" type="input">{{ button_two }}</button>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
Button Underline {% include 'components/buttons/button-underline' %}
#
HTML
<a href="#" class="button-underline">Button underline</a>
Twig
<a href="#" class="button-underline">Button underline</a>
{}
Retired Green {% include 'components/buttons/retired-green' %}
#
HTML
<a href="#" class="button button--green">Link as a button</a>

<button class="button button--green" type="input">Button as a button</button>
Twig
<a href="#" class="button button--green">{{ button_one }}</a>
<button class="button button--green" type="input">{{ button_two }}</button>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button