Action List

List of available actions.

html

<div class="action-list action-list--inline" style="--accent:#A8E6C1;--gap:8px;">
  <h3 class="action-list__heading">Message actions</h3>
  <ul class="action-list__items" role="list">
    <li><button type="button" class="action-list__btn">Reply</button></li>
    <li><button type="button" class="action-list__btn">Forward</button></li>
    <li><button type="button" class="action-list__btn">Archive</button></li>
    
    <li><button type="button" class="action-list__btn action-list__btn--destructive">Delete</button></li>
    
  </ul>
</div>
<style>
.action-list { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 320px; width: 320px; padding: 16px; border-radius: 12px; box-sizing: border-box; }
.action-list__heading { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.action-list__items { list-style: none; margin: 0; padding: 0; }
.action-list--inline .action-list__items { display: flex; flex-wrap: wrap; gap: var(--gap); }
.action-list--stacked .action-list__items { display: flex; flex-direction: column; gap: var(--gap); }
.action-list--menu .action-list__items { display: flex; flex-direction: column; border: 1px solid #24143020; border-radius: 8px; overflow: hidden; }
.action-list__btn { background: var(--accent); color: #241430; border: none; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.action-list--menu .action-list__btn { background: transparent; border-radius: 0; text-align: left; width: 100%; padding: 10px 14px; border-bottom: 1px solid #24143020; }
.action-list--menu li:last-child .action-list__btn { border-bottom: none; }
.action-list__btn:hover { filter: brightness(0.94); }
.action-list__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.action-list__btn--destructive { background: #F5C2E0; color: #7A1030; }
</style>

tailwind

<div class="action-list-tw action-list-tw--inline font-sans text-sm text-[#241430] bg-[#FAF7F2] max-w-[320px] w-[320px] p-4 rounded-xl box-border" style="--accent:#A8E6C1;--gap:8px;">
  <h3 class="m-0 mb-2.5 text-sm font-bold">Message actions</h3>
  <ul role="list" class="action-list-tw__items list-none m-0 p-0">
    <li><button type="button" class="action-list-tw__btn rounded-lg px-3.5 py-2 font-semibold border-0 cursor-pointer" style="background:#A8E6C1;color:#241430">Reply</button></li>
    <li><button type="button" class="action-list-tw__btn rounded-lg px-3.5 py-2 font-semibold border-0 cursor-pointer" style="background:#A8E6C1;color:#241430">Forward</button></li>
    <li><button type="button" class="action-list-tw__btn rounded-lg px-3.5 py-2 font-semibold border-0 cursor-pointer" style="background:#A8E6C1;color:#241430">Archive</button></li>
    
    <li><button type="button" class="action-list-tw__btn rounded-lg px-3.5 py-2 font-semibold border-0 cursor-pointer bg-[#F5C2E0] text-[#7A1030]">Delete</button></li>
    
  </ul>
</div>
<style>
.action-list-tw--inline .action-list-tw__items { display:flex; flex-wrap:wrap; gap:var(--gap); }
.action-list-tw--stacked .action-list-tw__items { display:flex; flex-direction:column; gap:var(--gap); }
.action-list-tw--menu .action-list-tw__items { display:flex; flex-direction:column; border:1px solid #24143020; border-radius:8px; overflow:hidden; }
.action-list-tw--menu .action-list-tw__btn { border-radius:0; text-align:left; width:100%; border-bottom:1px solid #24143020; }
.action-list-tw--menu li:last-child .action-list-tw__btn { border-bottom:none; }
.action-list-tw__btn:focus-visible { outline:2px solid #241430; outline-offset:2px; }
</style>

react

export function ActionList({
  heading = "Message actions",
  layout = "inline",
  accent = "#A8E6C1",
  destructive = true,
  gap = 8,
}) {
  const wrapStyle = { fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", maxWidth: 320, width: 320, padding: 16, borderRadius: 12, boxSizing: "border-box" };
  const menu = layout === "menu";
  const listStyle = layout === "inline"
    ? { display: "flex", flexWrap: "wrap", gap, listStyle: "none", margin: 0, padding: 0 }
    : layout === "stacked"
    ? { display: "flex", flexDirection: "column", gap, listStyle: "none", margin: 0, padding: 0 }
    : { display: "flex", flexDirection: "column", border: "1px solid #24143020", borderRadius: 8, overflow: "hidden", listStyle: "none", margin: 0, padding: 0 };
  const btnStyle = { background: menu ? "transparent" : accent, color: "#241430", border: "none", borderBottom: menu ? "1px solid #24143020" : "none", borderRadius: menu ? 0 : 8, textAlign: menu ? "left" : "center", width: menu ? "100%" : "auto", padding: menu ? "10px 14px" : "8px 14px", font: "inherit", fontWeight: 600, cursor: "pointer" };
  return (
    <div style={wrapStyle}>
      <h3 style={{ margin: "0 0 10px", fontSize: 14, fontWeight: 700 }}>{heading}</h3>
      <ul role="list" style={listStyle}>
        <li><button type="button" style={btnStyle}>Reply</button></li>
        <li><button type="button" style={btnStyle}>Forward</button></li>
        <li><button type="button" style={btnStyle}>Archive</button></li>
        {destructive && (
          <li><button type="button" style={{ ...btnStyle, background: menu ? "transparent" : "#F5C2E0", color: "#7A1030" }}>Delete</button></li>
        )}
      </ul>
    </div>
  );
}