Liquid button

button.liquid

{% comment %}
  Button/Link Snippet

  Parameters:
  - text: The text to display in the button
  - is_link: Boolean - if true, renders as <a> tag, if false renders as <button>
  - url: URL for the link (required if is_link is true)
  - button_style: 'primary', 'secondary', 'link', or 'custom' (optional, defaults to 'primary')
  - custom_bg_color: Custom background color (optional, for custom style)
  - custom_text_color: Custom text color (optional, for custom style)
  - type: Button type for button elements (optional, defaults to 'button')
  - class: Additional CSS classes (optional)
  - disabled: Boolean - if true, disables the button (optional)
  - aria_label: ARIA label for accessibility (optional)
  - onclick: JavaScript onclick handler (optional)
{% endcomment %}

{% liquid
  assign button_style = button_style | default: 'primary'
  assign type = type | default: 'button'
  assign is_disabled = disabled | default: false
  assign add_to_cart_button = add_to_cart_button | default: false

  assign button_class = ''
  if button_style == 'primary'
    assign button_class = 'btn'
  elsif button_style == 'secondary'
    assign button_class = 'btn'
  elsif button_style == 'link'
    assign button_class = 'link'
  elsif button_style == 'custom'
    assign button_class = 'btn settings-btn-color'
  endif

  if class != blank
    assign button_class = button_class | append: ' ' | append: class
  endif
%}

{% style %}
  .btn {
    cursor: pointer;
    overflow: hidden;
    position: relative;
  }
  .btn .text {
    position: relative;
    transition: 0.4s ease all;
    z-index: 1;
  }
  .btn::before {
    /* TODO: change to conform to design system - probably a secondary color */
    background-color: #000;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: 0.4s ease all;
    width: 0;
    z-index: 0;
  }
  .btn:hover::before {
    width: 100%;
  }
{% endstyle %}

{% if is_link %}
  {% comment %} Render as link styled like a button {% endcomment %}
  <a
    href="{{ url }}"
    class="{{ button_class }}"
    {% if aria_label != blank %}
      aria-label="{{ aria_label }}"
    {% endif %}
    {% if onclick != blank %}
      onclick="{{ onclick }}"
    {% endif %}
    {% if is_disabled %}
      aria-disabled="true"
      tabindex="-1"
      style="pointer-events: none; opacity: 0.5;"
    {% endif %}
    {% if button_style == 'custom' and custom_bg_color != blank and custom_text_color != blank %}
      style="
        --settings-btn-bg-color:{{ custom_bg_color }};
        --settings-btn-text-color:{{ custom_text_color }};
      "
    {% endif %}
  >
    <span class="text">{{ text }}</span>
  </a>
{% else %}
  {% comment %} Render as button element {% endcomment %}
  <button
    type="{{ type }}"
    class="{{ button_class }}"
    {% if aria_label != blank %}
      aria-label="{{ aria_label }}"
    {% endif %}
    {% if onclick != blank %}
      onclick="{{ onclick }}"
    {% endif %}
    {% if is_disabled %}
      disabled
      aria-disabled="true"
    {% endif %}
    {% if button_style == 'custom' and custom_bg_color != blank and custom_text_color != blank %}
      style="
        --settings-btn-bg-color:{{ custom_bg_color }};
        --settings-btn-text-color:{{ custom_text_color }};
      "
    {% endif %}
  >
    <span class="text">{{ text }}</span>

    {% if add_to_cart_button %}
      {% comment %} Processing text {% endcomment %}
      <span class="hidden group-[.processing]:inline group-[.show-added]:!hidden">Adding...</span>
      {% comment %} Added text {% endcomment %}
      <span class="hidden items-center justify-center gap-2 group-[.show-added]:flex">
        {% render 'svg-icon-check-a2c' %}
        <span>Added</span>
      </span>
    {% endif %}
  </button>
{% endif %}

Usage:

{% capture button_text %}
    {%- if variant_available == true -%}
        Add to Cart - {{ default_variant.price | money }}
    {%- else -%}
        Sold Out
    {%- endif %}
{% endcapture %}

{%
    render 'button',
    text: button_text,
    button_style: 'primary',
    type: 'button',
    class: 'js-buybox__product-addToCartBtn w-full flex-1 rounded-full bg-aqua-900 p-3.5 text-sm font-medium uppercase tracking-2p text-gray-50 disabled:cursor-not-allowed disabled:opacity-60 lg:p-4 lg:text-base group-[.processing]:hidden group-[.show-added]:hidden'
    aria_label: 'Add this product to your shopping cart'
    is_disabled: variant_available == false
    add_to_cart_button: true
%}