{% if context %}
  {% set theme = context.theme %}
  {% set id = context.id %}
  {% set text = context.text %}
  {% set style = context.style %}
  {% set size = context.size %}
  {% set override_class = context.override_class %}
  {% set html = context.html %}
  {% set text = context.text %}
{% endif %}

{% spaceless %}

{# Determine type of element to use, if not explicitly set -#}
{% set tags = 'button' %}


{# Work out what colour theme is needed for the styling #}
{% if theme %}
  {% set theme_class = theme %}
{% endif %}

<{{tags}}
{# You're using an ID? Really?? That'll go here #}
{% if id %} id="{{-id-}}"{% endif %}

class="vf-button
{#- This will list the them classname #}
{# {% for class in theme_class %} vf-button--{{class}}{% endfor -%} #}
{%- if theme_class %} vf-button--{{theme_class}}{% endif %}
{# If you're styling the shape of the item, the classnames will render in this for loop #}
{%- if style %}
  {% for styles in style %} vf-button--{{styles}}{% endfor -%}
{% endif -%}
{# If you want a size #}
{%- if size %}
  vf-button--{{size}}
{% endif -%}
{# You want a snowflake of a classname for something, here you go #}
{%- if override_class %} | {{override_class}}{% endif -%}

">

{{- html | safe if html else text -}}

</{{tags}}>
{% endspaceless %}