Quick Action

Frequently used contextual action.

html

<button type="button" class="qa qa--star" style="--bg:#241430;border-radius:999px" aria-pressed="false">
  <span class="qa__glyph qa__glyph--star"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3l2.6 5.6 6.1.6-4.6 4.1 1.3 6-5.4-3.2L6.6 19l1.3-6-4.6-4.1 6.1-.6z"/></svg></span>
  <span class="qa__glyph qa__glyph--archive"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8M10 13h4"/></svg></span>
  <span class="qa__glyph qa__glyph--share"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="6" cy="12" r="2.4"/><circle cx="18" cy="6" r="2.4"/><circle cx="18" cy="18" r="2.4"/><path d="M8.2 10.8l7.5-4.5M8.2 13.2l7.5 4.5"/></svg></span>
  Star
</button>
<style>
.qa {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 system-ui, sans-serif;
  padding: 8px 14px;
  border: 1.5px solid rgba(36,20,48,.25);
  background: #FAF7F2;
  color: #241430;
  cursor: pointer;
}
.qa__glyph { display: none; }
.qa--star .qa__glyph--star, .qa--archive .qa__glyph--archive, .qa--share .qa__glyph--share { display: inline-flex; }
.qa--active { background: var(--bg); border-color: var(--bg); color: #FAF7F2; }
.qa:hover:not(.qa--active) { background: rgba(36,20,48,.06); }
.qa:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

tailwind

<button type="button" class="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold bg-[#FAF7F2] text-[#241430] cursor-pointer hover:bg-black/5 qa-tw qa-tw--star" style="border:1.5px solid rgba(36,20,48,.25);border-radius:999px" aria-pressed="false">
  <span class="qa-tw__glyph qa-tw__glyph--star"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3l2.6 5.6 6.1.6-4.6 4.1 1.3 6-5.4-3.2L6.6 19l1.3-6-4.6-4.1 6.1-.6z"/></svg></span>
  <span class="qa-tw__glyph qa-tw__glyph--archive"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8M10 13h4"/></svg></span>
  <span class="qa-tw__glyph qa-tw__glyph--share"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="6" cy="12" r="2.4"/><circle cx="18" cy="6" r="2.4"/><circle cx="18" cy="18" r="2.4"/><path d="M8.2 10.8l7.5-4.5M8.2 13.2l7.5 4.5"/></svg></span>
  Star
</button>
<style>
.qa-tw__glyph { display: none; }
.qa-tw--star .qa-tw__glyph--star, .qa-tw--archive .qa-tw__glyph--archive, .qa-tw--share .qa-tw__glyph--share { display: inline-flex; }
.qa-tw--active { background: #241430 !important; border-color: #241430 !important; color: #FAF7F2 !important; }
.qa-tw--star:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

const QA_ICONS = {
  star: <path d="M12 3l2.6 5.6 6.1.6-4.6 4.1 1.3 6-5.4-3.2L6.6 19l1.3-6-4.6-4.1 6.1-.6z" />,
  archive: <><rect x="3" y="4" width="18" height="4" rx="1" /><path d="M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8M10 13h4" /></>,
  share: <><circle cx="6" cy="12" r="2.4" /><circle cx="18" cy="6" r="2.4" /><circle cx="18" cy="18" r="2.4" /><path d="M8.2 10.8l7.5-4.5M8.2 13.2l7.5 4.5" /></>,
};

export function QuickActionButton({
  label = "Star",
  icon = "star",
  active = false,
  bg = "#241430",
  radius = 999,
}) {
  return (
    <button
      type="button"
      aria-pressed={active}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        padding: "8px 14px",
        borderRadius: radius,
        border: `1.5px solid ${active ? bg : "rgba(36,20,48,.25)"}`,
        background: active ? bg : "#FAF7F2",
        color: active ? "#FAF7F2" : "#241430",
        font: "600 13px/1 system-ui, sans-serif",
        cursor: "pointer",
      }}
    >
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        {QA_ICONS[icon]}
      </svg>
      {label}
    </button>
  );
}