Success

Operation succeeded.

Payment received — receipt sent to your email.

html

<div class="suc-demo">
  <button class="suc-btn" type="button">Pay now</button>
  
  <div class="suc-banner" style="--accent:#A8E6C1;border-radius:10px;" role="status">
    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="m8 12.5 2.5 2.5L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
    <span>Payment received — receipt sent to your email.</span>
  </div>
  
</div>
<style>
.suc-demo { width: 300px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; }
.suc-btn { font: 700 14px system-ui, sans-serif; padding: 10px 20px; border-radius: 8px; border: none; background: #241430; color: #FAF7F2; cursor: pointer; margin-bottom: 10px; }
.suc-banner { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 25%, #FAF7F2); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); color: color-mix(in srgb, var(--accent) 65%, #241430); font-weight: 600; font-size: 13px; }
</style>

tailwind

<div class="w-[300px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-[18px] rounded-xl">
  <button type="button" class="font-bold text-sm px-5 py-2.5 rounded-lg border-0 bg-[#241430] text-[#FAF7F2] cursor-pointer mb-2.5">Pay now</button>
  
  <div role="status" class="flex items-start gap-2 px-3.5 py-3 font-semibold text-[13px]" style="background:color-mix(in srgb, #A8E6C1 25%, #FAF7F2);border:1.5px solid color-mix(in srgb, #A8E6C1 55%, transparent);color:color-mix(in srgb, #A8E6C1 65%, #241430);border-radius:10px;">
    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="m8 12.5 2.5 2.5L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
    <span>Payment received — receipt sent to your email.</span>
  </div>
  
</div>

react

export function SuccessState({
  message = "Payment received — receipt sent to your email.",
  accent = "#A8E6C1",
  force = true,
  radius = 10,
}) {
  return (
    <div style={{ width: 300, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12 }}>
      <button type="button" style={{ font: "700 14px system-ui, sans-serif", padding: "10px 20px", borderRadius: 8, border: "none", background: "#241430", color: "#FAF7F2", cursor: "pointer", marginBottom: 10 }}>Pay now</button>
      {force && (
        <div role="status" style={{ display: "flex", alignItems: "flex-start", gap: 8, padding: "12px 14px", borderRadius: radius, background: `color-mix(in srgb, ${accent} 25%, #FAF7F2)`, border: `1.5px solid color-mix(in srgb, ${accent} 55%, transparent)`, color: `color-mix(in srgb, ${accent} 65%, #241430)`, fontWeight: 600, fontSize: 13 }}>
          <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="2" /><path d="m8 12.5 2.5 2.5L16 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" /></svg>
          <span>{message}</span>
        </div>
      )}
    </div>
  );
}