AIMRAN
✓Booking confirmedTodo está preparado
HTML + CSSToasts

Island pill toast

A small black pill stretches open to show the message and then shrinks back, like the iPhone's Dynamic Island.

Settings

16px
1x

Code

<div class="uv-zi"><button class="fire">Confirm</button><div class="toast"><i>✓</i><span><b>Booking confirmed</b><small>You’re all set</small></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

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

Calendar event toast

ToastsHTML + CSS

Where to use it

It fits mobile-first products that want to feel native. In a restaurant booking app, the moment someone confirms a table, the pill grows out of a dot with “Booking confirmed” and closes again a few seconds later. If you were looking for a Dynamic Island style notification in CSS, this is it.

Keep the text to a title and one short line, since the pill only opens so far. It works best at the top of the screen on phones; at the bottom of a desktop page, the nod to the iPhone gets lost.