Action Sheet

Mobile-style collection of actions.

html

<div class="as-demo">
  <div class="as-backdrop"></div>
  <div class="as-sheet as-sheet--grouped" style="width:360px;" role="dialog" aria-modal="true" aria-labelledby="as-title">
    <div class="as-handle" aria-hidden="true"></div>
    <h3 id="as-title" class="as-title">Share photo</h3>
    <div class="as-actions">
      <button type="button" class="as-action">Save image</button>
      <button type="button" class="as-action">Copy link</button>
      <button type="button" class="as-action as-action--accent" style="color:#E8A020;">Delete</button>
    </div>
    <button type="button" class="as-cancel">Cancel</button>
  </div>
</div>
<style>
.as-demo { position: relative; min-height: 440px; display: flex; align-items: flex-end; justify-content: center; padding: 20px; box-sizing: border-box; border-radius: 12px; background: linear-gradient(135deg, #BFD9F2, #D9C8F0); }
.as-backdrop { position: absolute; inset: 0; background: rgba(36,20,48,.45); }
.as-sheet { position: relative; z-index: 1; margin: 0 auto; font: 16px/1.4 system-ui, sans-serif; color: #241430; box-sizing: border-box; }
.as-handle { width: 36px; height: 4px; border-radius: 2px; background: #24143033; margin: 0 auto 10px; }
.as-title { margin: 0 0 10px; text-align: center; font-size: 13px; font-weight: 600; color: #24143099; text-transform: uppercase; letter-spacing: .04em; }
.as-actions { background: #FAF7F2; border-radius: 14px; overflow: hidden; box-shadow: 0 -8px 28px rgba(36,20,48,.18); }
.as-action { display: block; width: 100%; padding: 14px; border: none; border-bottom: 1px solid #24143014; background: none; font: 500 16px system-ui, sans-serif; color: #241430; cursor: pointer; text-align: center; }
.as-action:last-child { border-bottom: none; }
.as-action:hover, .as-action:focus-visible { background: #24143008; outline: none; }
.as-cancel { display: block; width: 100%; margin-top: 8px; padding: 14px; border: none; border-radius: 14px; background: #FAF7F2; font: 600 16px system-ui, sans-serif; color: #241430; cursor: pointer; box-shadow: 0 -4px 16px rgba(36,20,48,.12); }
.as-cancel:hover, .as-cancel:focus-visible { background: #f0ece3; outline: none; }
.as-sheet--flat .as-actions { box-shadow: none; border: 1px solid #24143020; }
.as-sheet--flat .as-action { border-bottom-color: #24143020; }
.as-sheet--cards .as-actions { background: none; box-shadow: none; display: flex; flex-direction: column; gap: 8px; }
.as-sheet--cards .as-action { background: #FAF7F2; border-radius: 12px; border-bottom: none; box-shadow: 0 2px 8px rgba(36,20,48,.10); }
</style>

tailwind

<div class="relative min-h-[440px] flex items-end justify-center p-5 box-border rounded-xl" style="background:linear-gradient(135deg,#BFD9F2,#D9C8F0);">
  <div class="absolute inset-0 bg-[#241430]/45"></div>
  <div role="dialog" aria-modal="true" aria-labelledby="as-tw-title" class="as-tw as-tw--grouped relative z-10 mx-auto font-sans text-[#241430] box-border" style="width:360px;">
    <div aria-hidden="true" class="w-9 h-1 rounded-full bg-[#24143033] mx-auto mb-2.5"></div>
    <h3 id="as-tw-title" class="mb-2.5 text-center text-[13px] font-semibold uppercase tracking-wide text-[#241430]/60">Share photo</h3>
    <div class="as-tw-actions bg-[#FAF7F2] rounded-2xl overflow-hidden shadow-[0_-8px_28px_rgba(36,20,48,.18)]">
      <button type="button" class="as-tw-action block w-full text-center px-3.5 py-3.5 border-0 border-b border-[#24143014] bg-transparent font-medium text-base hover:bg-[#24143008] focus-visible:outline-none">Save image</button>
      <button type="button" class="as-tw-action block w-full text-center px-3.5 py-3.5 border-0 border-b border-[#24143014] bg-transparent font-medium text-base hover:bg-[#24143008] focus-visible:outline-none">Copy link</button>
      <button type="button" class="as-tw-action block w-full text-center px-3.5 py-3.5 border-0 bg-transparent font-medium text-base hover:bg-[#24143008] focus-visible:outline-none" style="color:#E8A020">Delete</button>
    </div>
    <button type="button" class="block w-full mt-2 px-3.5 py-3.5 border-0 rounded-2xl bg-[#FAF7F2] font-semibold text-base shadow-[0_-4px_16px_rgba(36,20,48,.12)] hover:bg-[#f0ece3] focus-visible:outline-none">Cancel</button>
  </div>
</div>
<style>
.as-tw--flat .as-tw-actions { box-shadow: none; border: 1px solid #24143020; }
.as-tw--flat .as-tw-action { border-bottom-color: #24143020; }
.as-tw--cards .as-tw-actions { background: none; box-shadow: none; display: flex; flex-direction: column; gap: 8px; }
.as-tw--cards .as-tw-action { background: #FAF7F2; border-radius: 12px; border-bottom: none; box-shadow: 0 2px 8px rgba(36,20,48,.10); }
</style>

react

export function ActionSheet({
  title = "Share photo",
  variant = "grouped",
  accent = "#E8A020",
  width = 360,
  backdrop = true,
}) {
  const wrap = {
    grouped: { boxShadow: "0 -8px 28px rgba(36,20,48,.18)" },
    flat: { boxShadow: "none", border: "1px solid #24143020" },
    cards: { background: "none", boxShadow: "none", display: "flex", flexDirection: "column", gap: 8 },
  }[variant] ?? {};
  const rowBorder = variant === "cards" ? "none" : (variant === "flat" ? "1px solid #24143020" : "1px solid #24143014");
  const rowStyle = {
    display: "block", width: "100%", padding: 14, border: "none",
    borderBottom: rowBorder, background: variant === "cards" ? "#FAF7F2" : "none",
    borderRadius: variant === "cards" ? 12 : 0,
    boxShadow: variant === "cards" ? "0 2px 8px rgba(36,20,48,.10)" : "none",
    font: "500 16px system-ui, sans-serif", color: "#241430", cursor: "pointer", textAlign: "center",
  };
  return (
    <div style={{ position: "relative", minHeight: 440, display: "flex", alignItems: "flex-end",
      justifyContent: "center", padding: 20, boxSizing: "border-box", borderRadius: 12,
      background: "linear-gradient(135deg, #BFD9F2, #D9C8F0)" }}>
      {backdrop && <div style={{ position: "absolute", inset: 0, background: "rgba(36,20,48,.45)" }} />}
      <div role="dialog" aria-modal="true" aria-labelledby="as-title" style={{ position: "relative",
        zIndex: 1, width, margin: "0 auto", boxSizing: "border-box", fontFamily: "system-ui, sans-serif", color: "#241430" }}>
        <div aria-hidden="true" style={{ width: 36, height: 4, borderRadius: 2, background: "#24143033", margin: "0 auto 10px" }} />
        <h3 id="as-title" style={{ margin: "0 0 10px", textAlign: "center", fontSize: 13, fontWeight: 600,
          color: "#24143099", textTransform: "uppercase", letterSpacing: ".04em" }}>{title}</h3>
        <div style={{ borderRadius: 14, overflow: "hidden", ...wrap }}>
          <button type="button" style={rowStyle}>Save image</button>
          <button type="button" style={rowStyle}>Copy link</button>
          <button type="button" style={{ ...rowStyle, color: accent }}>Delete</button>
        </div>
        <button type="button" style={{ display: "block", width: "100%", marginTop: 8, padding: 14,
          border: "none", borderRadius: 14, background: "#FAF7F2", fontWeight: 600, fontSize: 16,
          cursor: "pointer", boxShadow: "0 -4px 16px rgba(36,20,48,.12)" }}>Cancel</button>
      </div>
    </div>
  );
}