BrowserUX Share Button

Features

• 🎛 Smart Sharing Behavior

  • Native Web Share API Support
    Uses the navigator.share() method when available, ideal for mobile and PWA contexts
  • Automatic Fallback
    Gracefully falls back to a modern, touch-friendly modal when native sharing isn't supported
  • Share Metadata Detection
    Automatically reads share title, text, and url from attributes, the HTML document, or the web manifest
  • Multi-Platform Sharing
    Supports Email, SMS, X (Twitter), Facebook, WhatsApp, LinkedIn, Telegram, and Reddit
  • Per-Platform Disabling
    Disable any platform using attributes like facebook="false" or sms="false"

• 🔧 Developer Experience

  • Optional Shadow DOM (no-shadow)
    Renders in Shadow DOM by default; opt out to apply global styles more freely
  • Framework Agnostic
    Works with any frontend framework (React, Vue, Angular, etc.) or plain HTML
  • Lightweight and Tree-shakable
    Zero dependencies. Only imports what you use, with TypeScript typings included
  • Typed and Modular
    Built in TypeScript with typed SharePlatform enums and exportable utilities (getShareIcon, getBestIconUrl)

• ♿ Accessibility & Internationalization

  • Keyboard & ARIA Support
    Accessible modal with proper roles, focus trap, and keyboard navigation (Escape, Tab, Shift+Tab)
  • Multilingual Support (lang)
    Fully localized interface and ARIA labels, auto-detected or manually set via the lang attribute
  • Assistive Feedback
    Custom messages on copy success/failure, sharing errors, or initialization issues

• 🎨 Visual Customization

  • CSS Variables for Styling
    Customize both button and modal via CSS custom properties (`--bux-share-btn-*`, --bux-share-fallback-*, etc.)
  • Slot-Based Button Content
    Add your own icon and/or label inside the main button using slot name="icon"
  • Mobile Modal Animation
    Mobile-first fallback with slide-up motion and swipe-to-dismiss support