GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

Toast Notification UI: 9 Stacking Patterns

· Godrich · 9 items · 19 min read

FeedbackVanilla JSSCSSAutoplayNotifications

Toast notification UI is what decides how those corner messages pile up and how they leave again.

Push-up stack01 toast-stack-push-up Icon and color per kind02 toast-stack-type-icons Progress bar with hover pause03 toast-stack-progress-pause Swipe to fling away04 toast-stack-swipe-off An Undo button that really undoes05 toast-stack-undo-action Loading toast that morphs into a result06 toast-stack-promise-morph Group that folds past three07 toast-stack-collapse-group Six-corner position switch08 toast-stack-position-switch Live regions that split the reading order09 toast-stack-live-region

Auto-plays · click a tile to jump to its section · all nine in one zip

The order here is not popularity; it is the life of one notice on screen. It arrives and takes a slot (01), says what kind of thing happened with color and an icon (02), and shows how long it has left (03). Then comes clearing it: flick it off with a thumb (04), take back a delete that was a mistake (05), and swap a spinner for its answer without the card ever moving (06). The last three are what happens when several land at once: fold them into a deck (07), pick which of six slots the group sits in (08), and split the reading order for people who never see the screen (09). One piece of skeleton is shared by all nine, snackbar ui included: the moving part lives inside a box with a pinned height, and inside a stack the cards shift with transform. Push a card with top or margin instead and the browser re-measures the page every time the pile grows. Where consent must come before any notice, that seat belongs to Cookie Consent Banner UI, and notices forming a grid instead of a stack are covered in Bento Grid Design.

01Push-up stack

What this toast stack ui shows

A new card is inserted at the bottom of the list and everything above it climbs one slot. To keep that climb from snapping, each card's position is read before the insert, pinned back to where it was afterwards, and released a frame later.

Push-up stack
Open in a new tab

01 · Push-up stack — Measured area 35.204% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

getBoundingClientRecttranslateYrequestAnimationFrame

Where to look in the code

Those four steps are FLIP, and the browser only ever animates the last one.

var before = [].map.call(list.children, function (el) { return el.getBoundingClientRect().top; });
list.insertBefore(el, list.firstChild);
[].forEach.call(list.children, function (node, i) {
  if (!i) return;
  var d = before[i - 1] - node.getBoundingClientRect().top; // old top − new top = distance to undo
  node.style.transition = 'none';
  node.style.transform = 'translateY(' + d + 'px)';
});
requestAnimationFrame(function () { // release a frame later or the browser never sees a start position
  [].forEach.call(list.children, function (node, i) {
    if (!i) return;
    node.style.transition = '';
    node.style.transform = '';
  });
});

02Icon and color per kind

What happens on screen

Success, warning, error, and info sit stacked inside one card, and a single data-kind value picks which face shows. The autoplay loop rotates all four every half second, cutting between them with steps(1, end) so two faces are never half-visible at the same time.

Icon and color per kind
Open in a new tab

02 · Icon and color per kind — Measured area 10.784% · moving frames 19/23Original by GODRICH · SCSS and React ship in the zip · See the password

data-kindsteps(1, end)currentColor

How to read the code

A different negative animation-delay is all it takes to drive four elements from one keyframe block.

.tk.is-demo .tk__face {
  animation-name: tk-face;
  animation-duration: $dur-loop;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
.tk.is-demo .tk__face[data-kind="ok"]   { animation-delay: 0s; }
.tk.is-demo .tk__face[data-kind="warn"] { animation-delay: -1.5s; }
.tk.is-demo .tk__face[data-kind="bad"]  { animation-delay: -1s; }
.tk.is-demo .tk__face[data-kind="info"] { animation-delay: -0.5s; }
@keyframes tk-face {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

03Progress bar with hover pause

What moves

The bar along the bottom shrinks with scaleX, and because its origin sits on the left it empties from the right end. Hovering or moving keyboard focus in puts animation-play-state: paused on the bar and cancels the dismiss timer, which is re-armed with whatever time was left once you leave.

Progress bar with hover pause
Open in a new tab

03 · Progress bar with hover pause — Measured area 5.482% · moving frames 17/23Original by GODRICH · SCSS and React ship in the zip · See the password

scaleXanimation-play-statetransform-origin

What to change

Pause only one of the two and you get a frozen bar on a toast that closes anyway.

.pb__fill {
  display: block;
  height: 100%;
  background: $color;
  transform-origin: left center;
  transform: scaleX(1);
}
.pb__toast.is-on .pb__fill {
  animation-name: pb-drain;
  animation-duration: 4200ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.pb__toast.is-hold .pb__fill { animation-play-state: paused; }
@keyframes pb-drain {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

04Swipe to fling away

What you see

Press and drag, and the card tracks the pointer exactly; let go past 72px of travel and it flies 420px in that direction and closes. Anything shorter resets the offset to zero and the card springs back.

Swipe to fling away
Open in a new tab

04 · Swipe to fling away — Measured area 19.567% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

setPointerCapturepointermovetranslateX(var(--dx))

Where to look in the code

Calling setPointerCapture on the way down is what keeps move events coming after the finger leaves the card.

card.addEventListener('pointerdown', function (e) {
  root.classList.remove('is-demo');
  down = true; x0 = e.clientX; dx = 0;
  card.setPointerCapture(e.pointerId); // move events keep coming after the finger leaves the card
  card.classList.add('is-drag');
});
card.addEventListener('pointermove', function (e) {
  if (!down) return;
  dx = e.clientX - x0;
  set(dx);
});
card.addEventListener('pointerup', function () {
  if (!down) return;
  down = false;
  card.classList.remove('is-drag');
  if (Math.abs(dx) > OUT) fling(dx < 0 ? -1 : 1); else set(0);
});

05An undo button that really undoes

What happens on screen

A deleted row isn't removed right away; it's folded shut by moving grid-template-rows from 1fr to 0fr. Undo cancels the scheduled removal with clearTimeout and unfolds the row, so nothing has to be stashed anywhere to be restored later.

An Undo button that really undoes
Open in a new tab

05 · An Undo button that really undoes — Measured area 26.956% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

clearTimeoutgrid-template-rowsaria-live

How to read the code

The slot the toast rises into has a fixed height, which stops the list above from jumping when it appears.

function drop(row) {
  root.classList.remove('is-demo');
  if (pending) commit();
  pending = row;
  row.classList.add('is-gone');
  toast.classList.add('is-on');
  clearTimeout(timer);
  timer = setTimeout(commit, 4000);
}
function undo() {
  clearTimeout(timer);
  if (pending) pending.classList.remove('is-gone');
  pending = null;
  toast.classList.remove('is-on');
}

06Loading toast that morphs into a result

What moves

The ring spinning inside the card becomes a success or failure mark the instant the work finishes. It turns through one rotate cycle per second forever, and the swap lands on a cut between sample frames, so there is no window where both icons are half-there.

Loading toast that morphs into a result
Open in a new tab

06 · Loading toast that morphs into a result — Measured area 1.167% · moving frames 17/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotatesteps(1, end)aria-busy

What to change

While the work runs, the card carries aria-busy="true", and that flips to false when the answer arrives.

.pm__spin {
  animation-name: pm-spin;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pm-spin {
  0%   { rotate: 0deg; }
  100% { rotate: 360deg; }
}
@keyframes pm-load {
  0%   { opacity: 1; }
  35%  { opacity: 0; }
  56%  { opacity: 1; }
  77%  { opacity: 0; }
  89%  { opacity: 1; }
  100% { opacity: 1; }
}

07Group that folds past three

What you see

Every card carries its own index in --i, and folded versus fanned differ only in what that number is multiplied by and in the scale that rides along with it. Folded, the cards offset 12px apiece and shrink a little with scale so the pile reads as a deck; fanned, the step becomes 36px and everything returns to full size.

Group that folds past three
Open in a new tab

07 · Group that folds past three — Measured area 24.119% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-expanded--iscale

Where to look in the code

Stacking order is handled by one line, z-index: calc(9 - var(--i)).

.cg__item {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  z-index: calc(9 - var(--i));
  transform: translateY(calc(var(--i) * var(--fold) * -1)) scale(calc(1 - var(--i) * .04));
  transition: transform $duration $easing;
  cursor: pointer;
}
.cg__list.is-open .cg__item { transform: translateY(calc(var(--i) * var(--step) * -1)) scale(1); }

08Six-corner position switch

What happens on screen

One data-pos value on the window changes both the inset and the transform of the toast group, parking it in one of six slots, three along the top and three along the bottom. Center slots pair a left edge of 50% with translate(-50%), and right-hand slots pair calc(100% - 8px) with translate(-100%), so the math holds without knowing how wide the group is.

Six-corner position switch
Open in a new tab

08 · Six-corner position switch — Measured area 29.232% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

data-posinsetaria-pressed

How to read the code

Transitioning both values over the same duration is what makes the group glide instead of jump.

.ps__toasts {
  position: absolute;
  inset: calc(100% - 8px) auto auto calc(100% - 8px);
  display: flex;
  flex-direction: column;
  gap: $sp-1;
  width: 148px;
  transform: translate(-100%, -100%);
  transition: inset $duration $easing, transform $duration $easing;
}
.ps__screen[data-pos="tl"] .ps__toasts { inset: 30px auto auto 8px;               transform: translate(0, 0); }
.ps__screen[data-pos="tc"] .ps__toasts { inset: 30px auto auto 50%;               transform: translate(-50%, 0); }
.ps__screen[data-pos="tr"] .ps__toasts { inset: 30px auto auto calc(100% - 8px);  transform: translate(-100%, 0); }
.ps__screen[data-pos="br"] .ps__toasts { inset: calc(100% - 8px) auto auto calc(100% - 8px); transform: translate(-100%, -100%); }

09Live regions that split the reading order

What moves

The left lane lets the sentence a screen reader is already speaking finish and waits its turn; the right lane cuts in. The only difference between them is a role name and one aria-live value, so routing errors to the right lane keeps every other notice from stepping on someone's reading.

Live regions that split the reading order
Open in a new tab

09 · Live regions that split the reading order — Measured area 7.215% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

role="alert"aria-live="assertive"aria-atomic

What to change

Adding aria-atomic="true" makes the whole sentence be read again instead of only the piece that changed.

<p class="lr__card" role="status" aria-live="polite" aria-atomic="true" aria-label="Polite notification lane">
  <span class="lr__dot" aria-hidden="true"></span>
  <span class="lr__msg">Mail sent</span>
</p>
<p class="lr__card" role="alert" aria-live="assertive" aria-atomic="true" aria-label="Urgent notification lane">
  <span class="lr__dot" aria-hidden="true"></span>
  <span class="lr__msg">The payment was declined</span>
</p>

Where this breaks — three traps

A toast is a component whose job is to leave, and running nine of them on a two-second loop surfaced a problem the other posts on this site never hit. The cover image for each demo is picked as the single frame out of twenty-four that differs most from the one before it, and in a toast demo that frame is always the moment the card disappears. The first cut of 03 landed exactly there: the cover came out as an empty orange field with one button on it, and not a single frame with a notice in it was ever a candidate. The fix was to stop deleting the card in the loop at all. When the bar runs out the card dips once and the bar refills, as if the next notice had arrived, while real closing still happens through the button and the timer.

The second trap is where a fade sits. Two seconds sampled into twenty-four frames means a sample every 4.1667%, and a disappearance that straddles one of them is captured as a translucent ghost card. So every state swap in 06 and 09 is a steps(1, end) cut parked between samples, at 35%, 45%, 56%, 77%, and 89%. Item 01 needed different treatment because it holds three cards: removing all three at once makes that empty frame the winner again, so they are cut one at a time at 78%, 82%, and 86%. The third is size. An absolutely positioned toast is invisible to its parent's height calculation, so the stage looks fine while the document quietly grows taller than the frame. That is why every one of the nine puts its moving part inside a box with a pinned height, and every demo whose cards travel past that box also clips it with overflow: hidden. On a 320×200 stage only 174px of height survives the padding, so narrow screens drop the card step from 44px to 34px and shorten the box to match. When toasts have to glow on a dark panel, Linear Style Landing Page sets that contrast. The password on the archive holding all nine sources is qh4e8nxm, and the nine SCSS files and React ports inside carry exactly the values described here.

Accessibility

When someone asks for less motion (prefers-reduced-motion: reduce), all nine stop the autoplay loop and leave the current state on screen. The cards in 01 simply stand in their three slots with no glide, the bar in 03 stops draining, and the reading meter in 09 holds one height while color keeps showing which lane is live. None of the pressing and dismissing is wired to the mouse alone, either.

Item Mouse Keyboard Announcement
01 stack click the button Enter · Space aria-live="polite" for the new row only
03 progress hover to hold Tab focus holds it too aria-label on the close button
04 swipe drag and release Left/Right arrow closes that way the card behind stays, so nothing goes blank
05 undo click the bin Tab · Enter role="status" announces the delete
06 promise click the button Enter · Space aria-busy while the work runs
07 group click a card or the button Enter · Space aria-expanded
08 position click a slot Tab · Enter aria-pressed · one aria-label per slot
09 two lanes click the button Enter · Space role="status" and role="alert" kept apart

Why role="status" should be the default of the two, and what the assertive lane costs a reader, is set out in the MDN page on the status role. The pointer capture behind 04 has its conditions written up in the MDN page on setPointerCapture; skip it and move events stop the instant the finger crosses the card edge, leaving the card stranded mid-drag. Other parts that tell a person something are collected under the notify category, and parts that run on their own without a click sit under the auto trigger category.

Questions people ask

What happens when five notices land at the same second?

Cap how many stay on screen and either drop the oldest — 01 trims to three — or fold them into a deck the way 07 does. Both are written so that the cap is a single number you can change. Leave it uncapped and the column grows until it covers the buttons at the bottom of the page. Marks that stay put rather than pass by are the job of CSS Badge Design Ideas.

How long should a toast message ui stay before closing itself?

Item 03 uses 4.2 seconds. The right number depends on how much there is to read, but anything with an action button needs room to reach for it, so 05 holds for four seconds and pausing on hover is the safer default. Errors that cannot be retried are better off not auto-closing at all.

Can these nine replace a toast library outright?

If one screen owns one toast area and you have four or five kinds of message, yes — stack handling, auto-dismiss, undo, and live regions are all here with no dependencies. Where a library still earns its keep is calling a toast from anywhere in a large app or wiring it to server events. In that case keep the library's queue and drop this markup into its render slot for the look.

Enter the archive password

The password is inside this article. You will find it as you read.