Achievement unlocked toast

A medal spins in with a shine and sparks, along with the experience points earned.

Settings

Main color#f5b301

Secondary color#7c3aed

Size16px

Speed1x

Text

Code

index.html

<div class="uv-qac"><button type="button" class="fire">Replay</button><div class="tt" role="status"><span class="md" aria-hidden="true"><i class="sp"><b style="--a:0deg"></b><b style="--a:45deg"></b><b style="--a:90deg"></b><b style="--a:135deg"></b><b style="--a:180deg"></b><b style="--a:225deg"></b><b style="--a:270deg"></b><b style="--a:315deg"></b></i><span class="bd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.4 4.9 5.4.8-3.9 3.8.9 5.4L12 15.4l-4.8 2.5.9-5.4-3.9-3.8 5.4-.8z"/></svg></span></span><span class="tx"><small>Achievement unlocked</small><b>7-day streak</b></span><span class="xp">+50 XP</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

Gamified apps for fitness, language learning or productivity reward milestones with a moment of celebration. This toast slides up in a violet bar while a gold medal spins into place, a light sweeps across it, eight sparks burst outward and a +50 XP chip pops in last. The achievement name comes from the text control.

The celebration plays once each time the toast enters and stays still with reduced motion. The toast has role status, so screen readers announce the achievement without stealing focus.