Route

Addressable application location.

html

<a class="route route--link" href="#" style="--accent:#BFD9F2;">
  <code class="route__path">/users/:id</code>
  <span class="route__label">View user</span>
</a>
<style>
.route { display: inline-flex; align-items: center; gap: 8px; font: 14px system-ui, sans-serif; color: #241430; text-decoration: none; padding: 8px 12px; border-radius: 10px; }
.route__path { font: 12px/1 "SFMono-Regular", Consolas, monospace; background: rgba(36,20,48,.06); padding: 3px 6px; border-radius: 6px; }
.route--link { background: transparent; border: 1px solid rgba(36,20,48,.12); }
.route--link:hover, .route--link:focus-visible { border-color: var(--accent); outline: none; }
.route--badge { background: var(--accent); }
.route:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

tailwind

<a href="#" class="route-tw route-tw--link inline-flex items-center gap-2 font-sans text-sm text-[#241430] no-underline px-3 py-2 rounded-xl" style="--accent:#BFD9F2;">
  <code class="text-xs bg-[#241430]/[.06] px-1.5 py-0.5 rounded-md font-mono">/users/:id</code>
  <span>View user</span>
</a>
<style>
.route-tw--link { border: 1px solid rgba(36,20,48,.12); }
.route-tw--link:hover { border-color: var(--accent); }
.route-tw--badge { background: var(--accent); }
.route-tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

react

export function Route({
  path = "/users/:id",
  label = "View user",
  variant = "link",
  accent = "#BFD9F2",
}) {
  const badge = variant === "badge";
  return (
    <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", textDecoration: "none", padding: "8px 12px", borderRadius: 10, background: badge ? accent : "transparent", border: badge ? "none" : "1px solid rgba(36,20,48,.12)" }}>
      <code style={{ fontFamily: "SFMono-Regular, Consolas, monospace", fontSize: 12, background: "rgba(36,20,48,.06)", padding: "3px 6px", borderRadius: 6 }}>{path}</code>
      <span>{label}</span>
    </a>
  );
}