Priority

Relative importance.

html

<div class="priority priority--high" style="font-size:13px;" aria-label="Priority for Fix checkout crash on iOS Safari: high">
  <span class="priority__icon priority__icon--low" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M8 3v9M4 9l4 4 4-4"></path></svg></span>
  <span class="priority__icon priority__icon--medium" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 6.5h10M3 9.5h10"></path></svg></span>
  <span class="priority__icon priority__icon--high" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M8 13V4M4 8l4-4 4 4"></path></svg></span>
  <span class="priority__icon priority__icon--urgent" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M8 2 1.3 14h13.4L8 2z"></path><path d="M8 6.6v3.2"></path><circle cx="8" cy="11.4" r=".9" fill="currentColor" stroke="none"></circle></svg></span>
  <span class="priority__label">high</span>
  <span class="priority__context">Fix checkout crash on iOS Safari</span>
</div>
<style>
.priority { display: flex; align-items: center; gap: 8px; max-width: 480px; padding: 8px 12px; border-radius: 10px; font: 1em/1.3 system-ui, sans-serif; color: #241430; box-sizing: border-box; }
.priority__icon { display: none; flex-shrink: 0; }
.priority--low .priority__icon--low, .priority--medium .priority__icon--medium, .priority--high .priority__icon--high, .priority--urgent .priority__icon--urgent { display: inline-flex; }
.priority--low { background: color-mix(in srgb, #A8E6C1 35%, #FAF7F2); }
.priority--low .priority__icon, .priority--low .priority__label { color: #205c37; }
.priority--medium { background: color-mix(in srgb, #BFD9F2 35%, #FAF7F2); }
.priority--medium .priority__icon, .priority--medium .priority__label { color: #1f4266; }
.priority--high { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); }
.priority--high .priority__icon, .priority--high .priority__label { color: #7a5410; }
.priority--urgent { background: #241430; }
.priority--urgent .priority__icon, .priority--urgent .priority__label, .priority--urgent .priority__context { color: #FAF7F2; }
.priority__label { font-weight: 700; text-transform: capitalize; flex-shrink: 0; }
.priority__context { font-weight: 500; color: #241430cc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>

tailwind

<div aria-label="Priority for Fix checkout crash on iOS Safari: high" class="priority-tw priority-tw--high flex items-center gap-2 max-w-[480px] px-3 py-2 rounded-[10px] font-sans text-[#241430] box-border" style="font-size:13px;">
  <span class="priority-tw__icon priority-tw__icon--low flex-shrink-0" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M8 3v9M4 9l4 4 4-4"></path></svg></span>
  <span class="priority-tw__icon priority-tw__icon--medium flex-shrink-0" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 6.5h10M3 9.5h10"></path></svg></span>
  <span class="priority-tw__icon priority-tw__icon--high flex-shrink-0" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M8 13V4M4 8l4-4 4 4"></path></svg></span>
  <span class="priority-tw__icon priority-tw__icon--urgent flex-shrink-0" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M8 2 1.3 14h13.4L8 2z"></path><path d="M8 6.6v3.2"></path><circle cx="8" cy="11.4" r=".9" fill="currentColor" stroke="none"></circle></svg></span>
  <span class="priority-tw__label font-bold capitalize flex-shrink-0">high</span>
  <span class="priority-tw__context font-medium overflow-hidden text-ellipsis whitespace-nowrap">Fix checkout crash on iOS Safari</span>
</div>
<style>
.priority-tw__icon { display: none; }
.priority-tw--low .priority-tw__icon--low, .priority-tw--medium .priority-tw__icon--medium, .priority-tw--high .priority-tw__icon--high, .priority-tw--urgent .priority-tw__icon--urgent { display: inline-flex; }
.priority-tw--low { background: color-mix(in srgb, #A8E6C1 35%, #FAF7F2); }
.priority-tw--low .priority-tw__icon, .priority-tw--low .priority-tw__label { color: #205c37; }
.priority-tw--medium { background: color-mix(in srgb, #BFD9F2 35%, #FAF7F2); }
.priority-tw--medium .priority-tw__icon, .priority-tw--medium .priority-tw__label { color: #1f4266; }
.priority-tw--high { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); }
.priority-tw--high .priority-tw__icon, .priority-tw--high .priority-tw__label { color: #7a5410; }
.priority-tw--urgent { background: #241430; }
.priority-tw--urgent .priority-tw__icon, .priority-tw--urgent .priority-tw__label, .priority-tw--urgent .priority-tw__context { color: #FAF7F2; }
</style>

react

export function Priority({
  level = "high",
  context = "Fix checkout crash on iOS Safari",
  size = 13,
  showLabel = true,
}) {
  const palette = {
    low: { background: "color-mix(in srgb, #A8E6C1 35%, #FAF7F2)", color: "#205c37", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M8 3v9M4 9l4 4 4-4" /></svg> },
    medium: { background: "color-mix(in srgb, #BFD9F2 35%, #FAF7F2)", color: "#1f4266", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 6.5h10M3 9.5h10" /></svg> },
    high: { background: "color-mix(in srgb, #E8A020 25%, #FAF7F2)", color: "#7a5410", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M8 13V4M4 8l4-4 4 4" /></svg> },
    urgent: { background: "#241430", color: "#FAF7F2", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M8 2 1.3 14h13.4L8 2z" /><path d="M8 6.6v3.2" /><circle cx="8" cy="11.4" r=".9" fill="currentColor" stroke="none" /></svg> },
  }[level] ?? {};
  return (
    <div aria-label={"Priority for " + context + ": " + level} style={{ display: "flex", alignItems: "center", gap: 8, maxWidth: 480, padding: "8px 12px", borderRadius: 10, font: (size + "px/1.3 system-ui, sans-serif"), color: palette.color, background: palette.background, boxSizing: "border-box" }}>
      {palette.icon}
      {showLabel && <span style={{ fontWeight: 700, textTransform: "capitalize", flexShrink: 0 }}>{level}</span>}
      <span style={{ fontWeight: 500, opacity: 0.85, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{context}</span>
    </div>
  );
}