Back Navigation

Returns to previous view.

html

<a class="backnav backnav--link" href="#" style="--accent:#F5C2E0;">
  <span class="backnav__chevron" aria-hidden="true"></span>
  <span>Back to Projects</span>
</a>
<style>
.backnav { display: inline-flex; align-items: center; gap: 6px; font: 500 14px system-ui, sans-serif; color: #241430; text-decoration: none; padding: 8px 12px; border-radius: 8px; }
.backnav:hover { background: #FAF7F2; }
.backnav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.backnav__chevron { width: 7px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); flex: none; }
.backnav--button { background: #FAF7F2; border: 1px solid rgba(36,20,48,.12); }
.backnav--button:hover { background: #F0EAE0; }
</style>

tailwind

<a class="backnav-tw backnav-tw--link inline-flex items-center gap-1.5 px-3 py-2 rounded-lg font-medium text-sm text-[#241430] no-underline hover:bg-[#FAF7F2]" href="#" style="--accent:#F5C2E0;">
  <span class="w-[7px] h-[7px] border-l-2 border-b-2 rotate-45 flex-none" style="border-color:#F5C2E0;" aria-hidden="true"></span>
  <span>Back to Projects</span>
</a>
<style>
.backnav-tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.backnav-tw--button { background: #FAF7F2; border: 1px solid rgba(36,20,48,.12); }
.backnav-tw--button:hover { background: #F0EAE0; }
</style>

react

export function BackNavigation({
  label = "Back to Projects",
  style = "link",
  accent = "#F5C2E0",
  showIcon = true,
}) {
  const button = style === "button";
  return (
    <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "system-ui, sans-serif", fontSize: 14, fontWeight: 500, color: "#241430", textDecoration: "none", padding: "8px 12px", borderRadius: 8, background: button ? "#FAF7F2" : "transparent", border: button ? "1px solid rgba(36,20,48,.12)" : "none" }}>
      {showIcon && <span aria-hidden="true" style={{ width: 7, height: 7, borderLeft: "2px solid " + accent, borderBottom: "2px solid " + accent, transform: "rotate(45deg)", flex: "none" }} />}
      <span>{label}</span>
    </a>
  );
}