Share Actions

Last updated:

Practical patterns for sharing and copy-link flows that stay simple and trustworthy.

01 — Foundation

Sharing should feel simple

Handled badly, share UI becomes privacy chaos and accidental marketing funnels.

Share actions help users distribute links or content quickly. Users should understand what will be shared, where it goes, and whether sharing succeeded — without a wall of social icons and tracking pixels.

02 — Native

Native share and copy fallback

Use platform share sheets where available; always offer copy link.

  • navigator.share on supported mobile browsers when it fits the content
  • copy-link button with confirmation — see Copy to Clipboard
  • labelled control — “Share”, “Copy link” — not a row of unlabeled brand icons only
  • share only what the user expects — current page URL, not hidden tracking parameters 
if (navigator.share) {
    await navigator.share({ title, url });
} else {
    // show copy-link UI
}

03 — Avoid

What to avoid

More buttons is not more sharing.

  • popup chaos and forced social SDK embeds for a simple link
  • excessive tracking on share events without consent — see Cookie Consent
  • sharing private or sensitive data without a clear warning

04 — Accessibility

Accessible share controls

Confirmation must reach everyone, not only a toast power users might miss.

  • keyboard-accessible buttons; visible focus
  • announce “Link copied” with status region when copy succeeds
  • do not open new windows without warning for email or social targets

05 — Review

Before you approve

A short checklist for share actions in code review.

  • users know what is shared; success is confirmed
  • native share or copy fallback exists
  • no unnecessary social widget bloat or tracking surprises