State

Current workflow condition.

html

<div class="state-card" data-state="in review" style="font-size:14px;">
  <span class="state-card__accent" style="background:#D9C8F0;" aria-hidden="true"></span>
  <div class="state-card__text">
    <p class="state-card__entity">Invoice #4021</p>
    <span class="state-card__state">
      
      <svg class="state-card__icon state-card__icon--draft" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 17l1-4 9-9 3 3-9 9-4 1z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
      <svg class="state-card__icon state-card__icon--in-review" viewBox="0 0 20 20" aria-hidden="true"><ellipse cx="10" cy="10" rx="8" ry="5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="10" cy="10" r="2.2" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>
      <svg class="state-card__icon state-card__icon--approved" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10.5l3.5 3.5L16 5.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <svg class="state-card__icon state-card__icon--rejected" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M7 7l6 6M13 7l-6 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
      
      in review
    </span>
  </div>
</div>
<style>
.state-card { display: flex; align-items: center; gap: 12px; width: 280px; padding: 14px 16px; background: #FAF7F2; color: #241430; font-family: system-ui, sans-serif; border-radius: 12px; box-shadow: 0 6px 18px rgba(36,20,48,.1); box-sizing: border-box; }
.state-card__accent { width: 4px; align-self: stretch; border-radius: 2px; }
.state-card__entity { margin: 0 0 4px; font-weight: 700; font-size: .9em; }
.state-card__state { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .78em; text-transform: capitalize; }
.state-card__icon { width: 12px; height: 12px; display: none; }
.state-card[data-state="draft"] .state-card__icon--draft { display: block; }
.state-card[data-state="in review"] .state-card__icon--in-review { display: block; }
.state-card[data-state="approved"] .state-card__icon--approved { display: block; }
.state-card[data-state="rejected"] .state-card__icon--rejected { display: block; }
.state-card[data-state="draft"] .state-card__state { background: #BFD9F2; color: #12385E; }
.state-card[data-state="in review"] .state-card__state { background: #E8A020; color: #4A2E00; }
.state-card[data-state="approved"] .state-card__state { background: #A8E6C1; color: #17532F; }
.state-card[data-state="rejected"] .state-card__state { background: #F5C2E0; color: #7A1440; }
</style>

tailwind

<div class="state-card-tw flex items-center gap-3 w-72 px-4 py-3.5 bg-[#FAF7F2] text-[#241430] font-sans rounded-xl shadow box-border" data-state="in review" style="font-size:14px;">
  <span class="self-stretch w-1 rounded-sm" style="background:#D9C8F0;" aria-hidden="true"></span>
  <div>
    <p class="m-0 mb-1 font-bold" style="font-size:0.9em;">Invoice #4021</p>
    <span class="state-card-tw__state inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full font-bold capitalize" style="font-size:0.78em;">
      
      <svg class="state-card-tw__icon state-card-tw__icon--draft w-3 h-3" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 17l1-4 9-9 3 3-9 9-4 1z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
      <svg class="state-card-tw__icon state-card-tw__icon--in-review w-3 h-3" viewBox="0 0 20 20" aria-hidden="true"><ellipse cx="10" cy="10" rx="8" ry="5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="10" cy="10" r="2.2" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>
      <svg class="state-card-tw__icon state-card-tw__icon--approved w-3 h-3" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10.5l3.5 3.5L16 5.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <svg class="state-card-tw__icon state-card-tw__icon--rejected w-3 h-3" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M7 7l6 6M13 7l-6 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
      
      in review
    </span>
  </div>
</div>
<style>
.state-card-tw__icon { display: none; }
.state-card-tw[data-state="draft"] .state-card-tw__icon--draft { display: block; }
.state-card-tw[data-state="in review"] .state-card-tw__icon--in-review { display: block; }
.state-card-tw[data-state="approved"] .state-card-tw__icon--approved { display: block; }
.state-card-tw[data-state="rejected"] .state-card-tw__icon--rejected { display: block; }
.state-card-tw[data-state="draft"] .state-card-tw__state { background: #BFD9F2; color: #12385E; }
.state-card-tw[data-state="in review"] .state-card-tw__state { background: #E8A020; color: #4A2E00; }
.state-card-tw[data-state="approved"] .state-card-tw__state { background: #A8E6C1; color: #17532F; }
.state-card-tw[data-state="rejected"] .state-card-tw__state { background: #F5C2E0; color: #7A1440; }
</style>

react

export function State({
  entity = "Invoice #4021",
  state = "in review",
  accent = "#D9C8F0",
  size = 14,
  showIcon = true,
}) {
  const palette = {
    draft: { background: "#BFD9F2", color: "#12385E" },
    "in review": { background: "#E8A020", color: "#4A2E00" },
    approved: { background: "#A8E6C1", color: "#17532F" },
    rejected: { background: "#F5C2E0", color: "#7A1440" },
  }[state] ?? {};
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, width: 280, padding: "14px 16px",
      background: "#FAF7F2", color: "#241430", fontFamily: "system-ui, sans-serif", fontSize: size,
      borderRadius: 12, boxShadow: "0 6px 18px rgba(36,20,48,.1)", boxSizing: "border-box" }}>
      <span aria-hidden="true" style={{ alignSelf: "stretch", width: 4, borderRadius: 2, background: accent }} />
      <div>
        <p style={{ margin: "0 0 4px", fontWeight: 700, fontSize: "0.9em" }}>{entity}</p>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 999,
          fontWeight: 700, fontSize: "0.78em", textTransform: "capitalize", ...palette }}>
          {showIcon && state === "draft" && (
            <svg width="12" height="12" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 17l1-4 9-9 3 3-9 9-4 1z" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" /></svg>
          )}
          {showIcon && state === "in review" && (
            <svg width="12" height="12" viewBox="0 0 20 20" aria-hidden="true"><ellipse cx="10" cy="10" rx="8" ry="5" fill="none" stroke="currentColor" strokeWidth="1.4" /><circle cx="10" cy="10" r="2.2" fill="none" stroke="currentColor" strokeWidth="1.4" /></svg>
          )}
          {showIcon && state === "approved" && (
            <svg width="12" height="12" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10.5l3.5 3.5L16 5.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          )}
          {showIcon && state === "rejected" && (
            <svg width="12" height="12" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" strokeWidth="1.4" /><path d="M7 7l6 6M13 7l-6 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
          )}
          {state}
        </span>
      </div>
    </div>
  );
}