Luggage tag toast
A bag tag hangs from its cord and swings like a pendulum; brush it with the pointer and it starts swaying again.
Settings
Code
<div class="uvq09-tag"><i class="rl" aria-hidden="true"></i><button type="button" class="fire">Show again</button><div class="tt" role="status"><span class="st" aria-hidden="true"></span><div class="tg"><i class="eye" aria-hidden="true"></i><span class="rt" aria-hidden="true"><b>MAD</b><i>✈</i><b>LIS</b></span><b class="tx">Your bag is on belt 7</b><small>Flight TP 1027 · landed at 14:05</small><span class="ft"><i class="bc" aria-hidden="true"></i><button type="button" class="ok">Got it</button></span></div></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 ToastsWhere to use it
Baggage claim updates deserve something better than a grey banner. This toast hangs an airline bag tag from a rail with a cord and eyelet, airport codes in heavy type and a barcode, and a few lines of JavaScript run a damped pendulum so it swings in and settles. Moving the pointer across it, or pressing the arrow keys, gives it a push.
The main color is the stripe and button, the second the cord. Tune the stiffness and damping numbers in the script for a heavier or lighter tag; with reduced motion it simply hangs still. Good for travel apps, airlines and event cloakrooms.