Home Azalea Design System

Share

A “share” button that either copy’s to clipboard or launches the browser’s native share feature.

<div x-cloak x-data="share()" data-title="" data-url="" data-text="" class="flex relative">
    <template x-if="!native">

        <div>
            <div x-cloak x-show.transition.origin.top="feedback" class="absolute z-10 top-0 -mt-1 transform -translate-x-1/2 -translate-y-full py-2 px-3 bg-tertiary-700 rounded-sm shadow-sm">
                <span class="font-medium text-white text-sm nowrap">Copied</span>
            </div>
            <button @click="copy()" role="button" aria-label="Copy url" class="flex justify-center items-center">
                <span class="mr-2">

                    <div class="fill-current w-5 h-5 md:w-6 md:h-6" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path>
                            <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path>
                        </svg>
                    </div>
                </span>
                <span class="uppercase">Share</span>
            </button>
        </div>
    </template>
    <template x-if="native">

        <div>
            <button @click="execute()" role="button" aria-label="Share" class="flex justify-center items-center">
                <span class="mr-2">

                    <div class="fill-current w-5 h-5 md:w-6 md:h-6" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path>
                            <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path>
                        </svg>
                    </div>
                </span>
                <span class="uppercase">Share</span>
            </button>
        </div>
    </template>
</div>
 
{# Props: title, url, text #}
{# Prop: message #}
{% set message = message ?? 'Copied' %}
{% set defaultClasses = ['flex', 'relative'] %}
{# Prop: classes[] #}
{% if classes  %}
  {% set defaultClasses = defaultClasses|merge(classes) %}
{% endif %}

<div x-cloak x-data="share()" data-title="{{ title }}" data-url="{{ url }}" data-text="{{ text }}" class="{{ defaultClasses|join(' ') }}">
  <template x-if="!native">
    {# The copy button #}
    <div>
      <div x-cloak x-show.transition.origin.top="feedback" class="absolute z-10 top-0 -mt-1 transform -translate-x-1/2 -translate-y-full py-2 px-3 bg-tertiary-700 rounded-sm shadow-sm">
        <span class="font-medium text-white text-sm nowrap">{{ message }}</span>
      </div>
      <button @click="copy()" role="button" aria-label="Copy url" class="flex justify-center items-center">
        <span class="mr-2">{% include "@components/icon/icon.twig" with { icon: 'link' } %}</span>
        <span class="uppercase">Share</span>
      </button>
    </div>
  </template>
  <template x-if="native">
    {# The native share button #}
    <div>
      <button @click="execute()" role="button" aria-label="Share" class="flex justify-center items-center">
        <span class="mr-2">{% include "@components/icon/icon.twig" with { icon: 'link' } %}</span>
        <span class="uppercase">Share</span>
      </button>
    </div>
  </template>
</div>