Deep Link

URL linking directly to a specific application state.

html

<a class="deeplink" href="#" style="--accent:#BFD9F2;">
  <span class="deeplink__scheme">https://</span><span class="deeplink__path">yourapp.com/orders/48291</span>
  <span class="deeplink__go" aria-hidden="true">&#8594;</span>
</a>
<style>
.deeplink { display: inline-flex; align-items: center; gap: 8px; font: 13px/1.4 "SFMono-Regular", Consolas, monospace; color: #241430; text-decoration: none; padding: 10px 14px; background: #FAF7F2; border-radius: 999px; border: 1px solid rgba(36,20,48,.12); }
.deeplink:hover { border-color: var(--accent); }
.deeplink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.deeplink__scheme { opacity: .5; }
.deeplink__go { color: var(--accent); font-family: system-ui, sans-serif; }
</style>

tailwind

<a href="#" class="inline-flex items-center gap-2 font-mono text-[13px] text-[#241430] no-underline px-3.5 py-2.5 bg-[#FAF7F2] rounded-full border border-[#241430]/10 hover:border-[color:var(--accent)]" style="--accent:#BFD9F2;">
  <span class="opacity-50">https://</span><span>yourapp.com/orders/48291</span>
  <span class="font-sans" aria-hidden="true" style="color:#BFD9F2;">&#8594;</span>
</a>
<style>
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

react

export function DeepLink({
  path = "/orders/48291",
  scheme = "https",
  accent = "#BFD9F2",
  showQuery = false,
}) {
  return (
    <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "SFMono-Regular, Consolas, monospace", fontSize: 13, color: "#241430", textDecoration: "none", padding: "10px 14px", background: "#FAF7F2", borderRadius: 999, border: "1px solid rgba(36,20,48,.12)" }}>
      <span style={{ opacity: .5 }}>{scheme}://</span>
      <span>{"yourapp.com" + path + (showQuery ? "?ref=share" : "")}</span>
      <span aria-hidden="true" style={{ color: accent, fontFamily: "system-ui, sans-serif" }}>&#8594;</span>
    </a>
  );
}