Discount coupon toast

A toast shaped like a cut-out coupon with the discount code and a copy button.

Settings

Main color#db2777

Secondary color#fce7f3

Size16px

Speed1x

Text

Code

index.html

<div class="uv-qpc"><button type="button" class="fire">Show again</button><div class="tt" role="status"><span class="lf"><b>-15 %</b><small>on your order</small></span><span class="rt"><small>Your code</small><code>VERANO26</code><button type="button" class="cp"><span class="a">Copy</span><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Copied</span></button></span></div></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Toasts

See all Toasts

Animated toast notification

ToastsReact + Motion

Elastic success toast

ToastsHTML + CSS

Undo toast with timer

ToastsHTML + CSS

Upload progress toast

ToastsHTML + CSS

Shake error toast

ToastsHTML + CSS

Incoming message toast

ToastsHTML + CSS

Stacked toasts

ToastsHTML + CSS

Island pill toast

ToastsHTML + CSS

Where to use it

Exit offers, newsletter rewards and first order discounts feel more tangible when they look like a coupon. This toast has a colored stub with the percentage, notched edges cut with CSS masks, a dashed tear line and the code in a monospaced font. The copy button puts the code on the clipboard and confirms with a check.

The code is the editable text, so it is easy to swap per campaign. Keep the stub color bold and the rest neutral, and show the toast once per visit so it feels like a gift rather than a nag.