Share Link Preview - Everyday Interface Patterns

A local share link preview shows the destination, link affordance, and ready status without opening a network or OS share sheet.

Program

A share UI can preview the exact local destination before a person follows or copies it. This lesson uses a local path only.

share_link_preview.html

Visuals: captured from real browser rendering

<section class="share-preview">
  <h2>Share this track</h2>
  <p class="destination">/tracks/web/everyday-interface-patterns</p>
  <a class="share-link" href="/tracks/web/everyday-interface-patterns">Open local track page</a>
  <p role="status">Ready to share this local path. No network or OS share sheet opens in this lesson.</p>
</section>
<style>
  .share-preview { display: grid; gap: 10px; max-width: 32rem; border: 1px solid #94a3b8; padding: 12px; }
  .destination { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f5f9; padding: 6px; }
  .share-link { font-weight: 700; text-decoration-thickness: 2px; }
</style>

Name the share preview.
The section heading tells people this area is about sharing.
Show the local destination.
The exact local path is visible before anyone follows it.
Point the link to the same local path.
The link href matches the visible destination.
Use visible action text.
The link text says what following the link does.
Add honest share status.
The status says this lesson does not open a network call or OS share sheet.
Check the share preview.
The preview shows the destination, the local link, and honest status text.

local destination The share target is a local path, not a remote URL.

visible preview Showing the destination helps people check what will be shared.

share affordance A link or button should have visible text that names the action.