Share Widget Component

The Share Widget provides social sharing functionality with automatic fallback to a modal dialog when the native Web Share API is unavailable.

Usage

Wrap your trigger element with the share-widget component:

<x-share-widget>
    <x-slot:trigger>
        <x-button variant="outline" x-on:click="share()">
            <x-icons.share variant="micro" size="sm" />
            Share
        </x-button>
    </x-slot:trigger>
</x-share-widget>

How It Works

The component automatically detects browser capabilities:

• Web Share API Available: Opens the native share dialog (mobile devices, modern browsers)
• No Web Share API: Opens a modal with social media share buttons and copy link functionality

Slots

References