Assignee

Person responsible for work.

PA

Priya Anand

Frontend engineer

Assigned to this item

Unassigned — needs an owner

Invite pending

html

<div class="assignee" data-status="assigned" style="--accent:#A8E6C1;">
  <span class="assignee__avatar">PA</span>
  <div class="assignee__info">
    <p class="assignee__name">Priya Anand</p>
    <p class="assignee__role">Frontend engineer</p>
    <p class="assignee__status assignee__status--assigned"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Assigned to this item</p>
    <p class="assignee__status assignee__status--unassigned"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.6"/><path d="M4 4l8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>Unassigned — needs an owner</p>
    <p class="assignee__status assignee__status--pending"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.6"/><path d="M8 4.5V8l3 1.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Invite pending</p>
  </div>
</div>
<style>
.assignee { display:flex; gap:12px; align-items:flex-start; font:14px/1.4 system-ui, sans-serif; color:#241430; background:#FAF7F2; padding:16px; border-radius:12px; max-width:340px; box-sizing:border-box; }
.assignee__avatar { flex:none; width:40px; height:40px; border-radius:50%; background:var(--accent); border:2px solid transparent; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#241430; }
.assignee[data-status="unassigned"] .assignee__avatar { background:transparent; border:2px dashed #24143066; color:#24143066; }
.assignee__name { margin:0; font-weight:600; }
.assignee__role { margin:2px 0 0; color:#241430b3; font-size:13px; }
.assignee__status { display:none; align-items:center; gap:6px; margin:8px 0 0; font-size:13px; font-weight:600; }
.assignee[data-status="assigned"] .assignee__status--assigned,
.assignee[data-status="unassigned"] .assignee__status--unassigned,
.assignee[data-status="pending"] .assignee__status--pending { display:flex; }
.assignee[data-status="assigned"] .assignee__status--assigned { color:#1a7a4c; }
.assignee[data-status="unassigned"] .assignee__status--unassigned { color:#24143099; }
.assignee[data-status="pending"] .assignee__status--pending { color:#8a5d00; }
</style>

tailwind

<div class="assignee-tw flex gap-3 items-start font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4 rounded-xl max-w-[340px] box-border" data-status="assigned" style="--accent:#A8E6C1;">
  <span class="flex-none w-10 h-10 rounded-full flex items-center justify-center font-bold text-[13px]" style="background:var(--accent)">PA</span>
  <div class="min-w-0">
    <p class="m-0 font-semibold">Priya Anand</p>
    <p class="mt-0.5 text-[13px] text-[#241430]/70">Frontend engineer</p>
    <p class="assignee-tw__status assignee-tw__status--assigned hidden items-center gap-1.5 mt-2 text-[13px] font-semibold text-[#1a7a4c]"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Assigned to this item</p>
    <p class="assignee-tw__status assignee-tw__status--unassigned hidden items-center gap-1.5 mt-2 text-[13px] font-semibold text-[#241430]/60"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.6"/><path d="M4 4l8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>Unassigned — needs an owner</p>
    <p class="assignee-tw__status assignee-tw__status--pending hidden items-center gap-1.5 mt-2 text-[13px] font-semibold text-[#8a5d00]"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.6"/><path d="M8 4.5V8l3 1.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Invite pending</p>
  </div>
</div>
<style>
.assignee-tw[data-status="assigned"] .assignee-tw__status--assigned,
.assignee-tw[data-status="unassigned"] .assignee-tw__status--unassigned,
.assignee-tw[data-status="pending"] .assignee-tw__status--pending { display:flex; }
.assignee-tw[data-status="unassigned"] > span:first-child { background:transparent; border:2px dashed #24143066; color:#24143066; }
</style>

react

export function Assignee({
  name = "Priya Anand",
  initials = "PA",
  role = "Frontend engineer",
  status = "assigned",
  accent = "#A8E6C1",
  showRole = true,
}) {
  const info = {
    assigned: { text: "Assigned to this item", color: "#1a7a4c" },
    unassigned: { text: "Unassigned — needs an owner", color: "#24143099" },
    pending: { text: "Invite pending", color: "#8a5d00" },
  }[status] ?? { text: "Assigned to this item", color: "#1a7a4c" };
  const unassigned = status === "unassigned";
  return (
    <div style={{ display: "flex", gap: 12, alignItems: "flex-start", fontFamily: "system-ui, sans-serif",
      fontSize: 14, color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, maxWidth: 340, boxSizing: "border-box" }}>
      <span style={{ flex: "none", width: 40, height: 40, borderRadius: "50%",
        background: unassigned ? "transparent" : accent, border: unassigned ? "2px dashed #24143066" : "2px solid transparent",
        color: unassigned ? "#24143066" : "#241430", display: "flex", alignItems: "center", justifyContent: "center",
        fontWeight: 700, fontSize: 13 }}>{initials}</span>
      <div>
        <p style={{ margin: 0, fontWeight: 600 }}>{name}</p>
        {showRole && <p style={{ margin: "2px 0 0", color: "#241430b3", fontSize: 13 }}>{role}</p>}
        <p style={{ display: "flex", alignItems: "center", gap: 6, margin: "8px 0 0", fontSize: 13, fontWeight: 600, color: info.color }}>
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            {status === "assigned" && <path d="M3 8.5l3 3 7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />}
            {status === "unassigned" && <><circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.6" /><path d="M4 4l8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></>}
            {status === "pending" && <><circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.6" /><path d="M8 4.5V8l3 1.6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></>}
          </svg>
          {info.text}
        </p>
      </div>
    </div>
  );
}