Payment received toast

Money arrives and the amount counts up to the final figure with a green glow.

Settings

Main color#059669

Secondary color#d1fae5

Size16px

Speed1x

Text

Code

index.html

<div class="uv-qpy"><button type="button" class="fire">Simulate payment</button><div class="tt" role="status"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10l9-5.5 9 5.5M5 10.5v7M9.5 10.5v7M14.5 10.5v7M19 10.5v7M3 20h18"/></svg></span><span class="tx"><b>Payment received</b><small>From Lucía Martín, October rent</small></span><span class="am">+<span class="n" data-v="1250">0,00</span> €</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

Banking, invoicing and marketplace apps make incoming money feel good with a small moment of motion. This toast shows a bank icon, who paid and why, and an amount that counts up from zero with an ease out, then pulses with a soft green glow when it lands. The amount uses the page language for decimals and thousands.

Change the final amount with the data attribute and the sender line in the HTML. The toast uses role status, so the payment is announced politely, and the counting is quick enough not to delay reading.