More Actions

Opens additional actions.

html

<button type="button" class="btn-more" style="--bg:#241430;border-radius:8px" aria-label="More actions" aria-haspopup="menu" aria-expanded="false">
  <svg width="20" height="20" 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="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg>
</button>
<style>
.btn-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(36,20,48,.2);
  background: transparent;
  color: #241430;
  cursor: pointer;
}
.btn-more[aria-expanded="true"] { background: var(--bg); color: #FAF7F2; border-color: var(--bg); }
.btn-more:hover:not(:disabled):not([aria-expanded="true"]) { background: rgba(36,20,48,.08); }
.btn-more:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-more:disabled { opacity: .4; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="inline-flex items-center justify-center w-9 h-9 bg-transparent cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-black/5 btn-more-tw" style="border:1px solid rgba(36,20,48,.2);border-radius:8px" aria-label="More actions" aria-haspopup="menu" aria-expanded="false">
  <svg width="20" height="20" 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="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg>
</button>
<style>
.btn-more-tw[aria-expanded="true"] { background: #241430; color: #FAF7F2; border-color: #241430; }
.btn-more-tw:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function MoreActionsButton({
  label = "More actions",
  expanded = false,
  bg = "#241430",
  radius = 8,
  disabled = false,
}) {
  return (
    <button
      type="button"
      aria-label={label}
      aria-haspopup="menu"
      aria-expanded={expanded}
      disabled={disabled}
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        width: 36,
        height: 36,
        borderRadius: radius,
        border: `1px solid ${expanded ? bg : "rgba(36,20,48,.2)"}`,
        background: expanded ? bg : "transparent",
        color: expanded ? "#FAF7F2" : "#241430",
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.4 : 1,
      }}
    >
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <circle cx="5" cy="12" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="19" cy="12" r="1.6" />
      </svg>
    </button>
  );
}