browserux-share-button
Advanced tools
A smart, customizable Web Component for sharing content via Web Share API with graceful fallback.
EN | FR
A modern and adaptable Web Component that streamlines content sharing across all devices and platforms. It prioritizes the native Web Share API when available, while providing a polished and universal fallback experience. Lightweight, multilingual, and framework-independent.
🔗 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".
🌐 Multilingual Support(lang)
Fully localized interface and ARIA labels, auto-detected or manually set via the lang attribute.
🦮 Keyboard & ARIA Support
Accessible modal with proper roles, focus trap, and keyboard navigation (Escape, Tab, Shift+Tab).
📢 Assistive Feedback
Custom messages on copy success/failure, sharing errors, or initialization issues.
🖌 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.
🧼 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).
The <browserux-share-button> Web Component provides a seamless sharing experience by leveraging the Web Share API when available, and falling back to a fully featured, accessible modal on unsupported platforms.
When the user clicks the button:
navigator.share() is supported (typically mobile or PWA), it opens the native share sheet.The component automatically determines what to share:
title attribute, <title> tag, or manifest.text attribute, meta description, or manifest.url attribute or location.href.This behavior ensures zero setup for simple cases, just drop the component in your HTML.
When fallback is triggered, the modal:
"Link copied!").lang attribute or <html lang>.npm install browserux-share-button
Or via CDN:
<script type="module" src="https://unpkg.com/browserux-share-button/dist/browserux-share-button.min.js"></script>
Use the
.esm.jsbuild when integrating via a bundler (React, Vue, Angular, etc.), and the.min.jsversion when using directly in HTML via a<script>tag.
import 'browserux-share-button';
<browserux-share-button
url="https://example.com"
text="Check this out!"
></browserux-share-button>
useEffect:import { useEffect } from 'react';
useEffect(() => {
import('browserux-share-button');
}, []);
<browserux-share-button></browserux-share-button>
For JSX type support, you can manually create a
browserux-share-button.d.tstyping file if needed.
import 'browserux-share-button';
<browserux-share-button></browserux-share-button>
main.ts:import 'browserux-share-button';
AppModule, allow custom elements:import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
<script type="module" src="https://unpkg.com/browserux-share-button/dist/browserux-share-button.min.js"></script>
<browserux-share-button></browserux-share-button>
<browserux-share-button><browserux-share-button> supports various customization options and integration features:
| Parameter | Type | Name | Description |
|---|---|---|---|
| URL | Attribute | url | The URL to share (default: current location.href) |
| Title | Attribute | title | Title used in native and fallback share methods |
| Text | Attribute | text | Text snippet to accompany the shared link |
| Language | Attribute | lang | Forces the component language (en, fr, etc.) |
| No Shadow DOM | Attribute | no-shadow | Renders component without Shadow DOM |
| Platform Disabling | Attribute | facebook="false" | Disables specific platform in fallback UI |
| Manifest Source | Attribute | manifest-src | Custom path to web app manifest for metadata fallback |
| Custom Labels | Data attr | data-label-* | Override default labels (data-label-copy, etc.) |
| Share Button icon | Slot | icon | Customize Share Button icon |
url)By default, the <browserux-share-button> component shares the current page's URL (location.href).
However, you can override this behavior by explicitly setting a different URL using the url attribute.
urlstring (valid URL)location.href<browserux-share-button
url="https://example.com/page-to-share"
></browserux-share-button>
In this example, clicking the share button will share https://example.com/page-to-share, regardless of the actual page URL.
This is useful for:
Make sure the URL is publicly accessible and starts with https:// for best compatibility across social and native share services.
title)The title is used by some sharing platforms as a subject (e.g. email) or headline (e.g. Twitter/X or LinkedIn). By default, the component tries to extract the title from the current document or web app manifest.
titlestring<title> tag or web manifest<browserux-share-button
title="Check out this amazing article!"
></browserux-share-button>
In this case, platforms like email will use this as the subject line, and X/Twitter will include it as part of the tweet text.
If no title is provided:
<title> tagname field from the app manifest (if found)Provide a custom title if:
Tip: Combine
title,text, andurlfor best presentation across all platforms.
text)The text attribute provides a message or summary accompanying the shared URL. This content is commonly used in messaging apps, social platforms, and even email bodies.
textstringdescription) or left blank<browserux-share-button
text="Here's a quick read I think you'll enjoy."
></browserux-share-button>
If no text is defined:
description field from the web manifestTip: Keep it concise and relevant to maximize click-through across platforms.
lang)The lang attribute controls which language is used for all built-in labels, ARIA descriptions, and fallback UI content.
langstring (e.g., "en", "fr", "es", "de")<html lang>, or fallback to en<browserux-share-button lang="fr"></browserux-share-button>
In this example, all labels such as "Copy link" or error messages will appear in French.
lang attribute on the component<html lang>"en" (English)en)fr)es)de)ja)ru)pt)it)nl)Tip: You can also override any label with
data-label-*for custom copy regardless of language.
no-shadow)By default, the component uses Shadow DOM to encapsulate its styles and structure. You can disable this behavior by adding the no-shadow attribute.
no-shadowboolean (presence-only)<browserux-share-button no-shadow></browserux-share-button>
⚠️ Disabling Shadow DOM makes the component more vulnerable to global style conflicts.
facebook="false", etc.)The <browserux-share-button> component includes a fallback UI that shows sharing options for multiple platforms. If you want to hide specific platforms (e.g., those irrelevant to your audience or use case), you can disable them using a simple boolean attribute.
"false" (as a string)emailsmsxfacebookwhatsapplinkedintelegramreddit<browserux-share-button facebook="false" sms="false"></browserux-share-button>
manifest-src)By default, if you do not explicitly provide the title or text attributes, <browserux-share-button> will try to load metadata from your web app's manifest file.
The component looks for:
name → used as the share titledescription → used as the share textThis enables automatic integration with existing PWA metadata.
manifest-srcstring (valid URL path or absolute URL)<link rel="manifest"> from the current page<browserux-share-button
manifest-src="/custom-manifest.webmanifest"
></browserux-share-button>
If no manifest-src is defined:
<link rel="manifest"> in the <head>Tip: The manifest must be served with the correct MIME type (
application/manifest+json) and must be accessible via CORS.html
You can override the component’s built-in labels (used for ARIA accessibility or fallback UI) using data-label-* attributes. This is particularly helpful for localization, branding tone, or changing default behavior messages.
data-label-*| Attribute | Purpose |
|---|---|
data-label-copy | Text shown on the "Copy link" button |
data-label-copied | Message shown briefly after copying success |
data-label-error-copy | Error shown when clipboard copy fails |
data-label-error-init | Warning shown if manifest or init fails |
data-label-error-share | Message when navigator.share() throws an error |
<browserux-share-button
data-label-copy="Copier le lien"
data-label-copied="Lien copié !"
data-label-error-copy="Erreur lors de la copie"
data-label-error-init="Erreur lors de l'initialisation"
data-label-error-share="Échec du partage natif"
></browserux-share-button>
lang systemTip: These labels override those provided by
lang, so they are useful for hybrid or multilingual apps.
npm install
npm run build
The project uses TypeScript and Rollup to generate build outputs:
dist/browserux-share-button.esm.jsdist/browserux-share-button.umd.jsdist/browserux-share-button.d.tsdist/browserux-share-button.min.jsThese builds are ready to be used in both module-based environments and traditional script loading contexts.
class ShareButton extends HTMLElement
│
├── 🔐 Private properties
│ ├── shareTitle: string
│ ├── shareText: string
│ ├── shareUrl: string
│ ├── root: ShadowRoot | HTMLElement
│ ├── labels: typeof I18N_LABELS[string]
│ ├── externalFallbackEl?: HTMLDivElement
│ └── focusTrapRemover?: () => void
│
├── 🛠️ Configuration & Utilities
│ ├── private isDisabled(platform: SharePlatform): boolean
│ └── private getShareConfig(platform: SharePlatform): { href: string; label: string; icon: string } | null
│
├── 🌐 Localization & Initialization
│ └── private onKeyDown = (e: KeyboardEvent): void
│
├── 🖼️ Main Button Rendering
│ └── private render(): void
│
├── 📱 Fallback Rendering (Modal)
│ ├── private renderExternalFallback(): void
│ ├── private renderPlatformLinks(container: HTMLElement): void
│ ├── private renderCopyButton(container: HTMLElement, initialCopyHtml: string): void
│ ├── private bindFallbackEvents(container: HTMLElement): void
│ └── private showFallback(): void
│
└── 🔄 Lifecycle
└── async connectedCallback(): Promise<void>
MIT License, Free to use, modify, and distribute.
[1.0.1] – 2025-06-27
style attribute due to Shadow DOM encapsulationstyle="--bux-share-btn-bg: red" thanks to injected :host { ... } rule during connectedCallbackFAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.