stack/src/components/button/button.twig line 1

Open in your IDE?
  1. {%- set class_name = [
  2.   "btn",
  3.   "u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0",
  4.   props.variant in ["outline", "primary", "ghost", "facebook", "twitter", "instagram", "linkedin", "youtube"] ? "--" ~ props.variant : "--primary",
  5.   props.size in ["xs", "sm"] ? "--" ~ props.size : null,
  6.   props.animation in ["right", "zoom", "left", "down"] ? "--animation-" ~ props.animation : null,
  7.   props.icon_before ? "--icon-before" : null,
  8.   props.icon_only ? "--icon-only" : null,
  9.   props.full_width_mobile ? "--full-width-mobile" : null,
  10.   props.full_width ? "--full-width w-100" : null,
  11.   props.extra_class ? props.extra_class : null
  12. ]|join(' ')|trim -%}
  14. {%- set tag = props.tag in ['button', 'a', 'span'] ? props.tag : "a" -%}
  16. {%- set href_value = props.url is defined ? props.url : '#' -%}
  18. {%- set href = tag == 'a' ? "href='" ~ href_value ~ "'" : null -%}
  20. {%- set attrs = [
  21.   'class="' ~ class_name ~ '"',
  22. ] -%}
  24. {%- if href -%}
  25.   {%- set attrs = attrs|merge([href]) -%}
  26. {%- endif -%}
  28. {%- if props.id %}
  29.   {%- set attrs = attrs|merge(['id="' ~ props.id ~ '"']) -%}
  30. {%- endif -%}
  32. {%- if props.type and tag == "button" %}
  33.   {%- set attrs = attrs|merge(['type="' ~ props.type ~ '"']) -%}
  34. {%- endif -%}
  36. {%- if props.onclick is defined %}
  37.   {%- set attrs = attrs|merge(['onclick="' ~ props.onclick ~ '"']) -%}
  38. {%- endif -%}
  40. {%- if props.blank == true and tag == "a" %}
  41.   {%- set attrs = attrs|merge(['target="_blank"']) -%}
  42. {%- endif -%}
  44. {%- if tag == "button" and props.title %}
  45.   {%- set attrs = attrs|merge(['aria-label="' ~ props.title ~ '"']) -%}
  46. {%- endif -%}
  48. {%- if props.name and tag == "button" %}
  49.   {% set attrs = attrs|merge(['name=' ~ props.name ~ '']) %}
  50. {%- endif -%}
  52. {%- if props.value and tag == "button" %}
  53.   {%- set attrs = attrs|merge(['value="' ~ props.value ~ '"']) -%}
  54. {%- endif -%}
  56. {% if props.icon_only and tag == 'a' and props.title %}
  57.   {%- set attrs = attrs|merge(['title="' ~ props.title ~ '"']) -%}
  58. {% endif %}
  60. {%- if props.data is defined -%}
  61.   {%- set data_attrs = [] -%}
  62.   {%- for key, attribute in props.data -%}
  63.     {%- set data_attrs = data_attrs|merge(['data-' ~ key ~ '="' ~ attribute ~ '"']) -%}
  64.   {%- endfor -%}
  65.   {%- set data_attrs = data_attrs|join(' ')|trim -%}
  66.   {%- set attrs = attrs|merge([data_attrs]) -%}
  67. {%- endif -%}
  69. {%- set attrs = attrs|join(' ')|trim -%}
  71. <{{tag}} {{ attrs|raw }}>
  72.   {% if not props.icon_only %}
  73.     <span class="btn__title">
  74.       {{ props.title }}
  75.     </span>
  76.   {% endif %}
  78.   {% if props.icon %}
  79.     <span class="btn__icon d-flex align-items-center justify-content-center">
  80.       {% include "@Components/icon/icon.twig" with {props: {
  81.         src: props.icon.src,
  82.         color: props.icon.color,
  83.         size: props.icon.size,
  84.         stroke_off: props.stroke_off
  85.       }} %}
  86.     </span>
  87.   {% endif %}
  88. </{{tag}}>