Mention

Reference to another user.

html

<span class="mention mention--pill" data-me="false" style="--accent:#E8A020;">
  <span class="mention__name">Alex Rivera</span>
  <span class="mention__handle" aria-hidden="true">@alexr</span>
  
</span>
<style>
.mention { display: inline-flex; align-items: baseline; gap: 4px; font: 14px system-ui, sans-serif; color: #241430; }
.mention--pill { background: var(--accent); padding: 2px 10px; border-radius: 999px; }
.mention--underline { border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.mention__name { font-weight: 600; }
.mention__handle { font-size: 12px; color: #24143080; }
.mention[data-me="true"] .mention__name { text-decoration: underline; }
.mention__you { font-size: 12px; color: #24143080; font-style: italic; }
</style>

tailwind

<span data-me="false" class="mention-tw mention-tw--pill inline-flex items-baseline gap-1 font-sans text-sm text-[#241430]" style="--accent:#E8A020">
  <span class="font-semibold">Alex Rivera</span>
  <span class="text-xs text-[#241430]/50" aria-hidden="true">@alexr</span>
  
</span>
<style>
.mention-tw--pill { background: var(--accent); padding: 2px 10px; border-radius: 999px; }
.mention-tw--underline { border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.mention-tw[data-me="true"] span:first-child { text-decoration: underline; }
</style>

react

export function Mention({
  fullName = "Alex Rivera",
  handle = "alexr",
  style = "pill",
  isCurrentUser = false,
  accent = "#E8A020",
}) {
  const wrap = style === "pill"
    ? { background: accent, padding: "2px 10px", borderRadius: 999 }
    : { borderBottom: `2px solid ${accent}`, paddingBottom: 1 };
  return (
    <span style={{ display: "inline-flex", alignItems: "baseline", gap: 4, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", ...wrap }}>
      <span style={{ fontWeight: 600, textDecoration: isCurrentUser ? "underline" : "none" }}>{fullName}</span>
      <span style={{ fontSize: 12, color: "#24143080" }} aria-hidden="true">@{handle}</span>
      {isCurrentUser && <span style={{ fontSize: 12, color: "#24143080", fontStyle: "italic" }}>(you)</span>}
    </span>
  );
}