Skip to content
Pinky UI

mobile

Bottom Toast Stack

Short messages stack and compress at the lower edge, where mobile feedback is easier to reach and read.

  • mobile
  • feedback
  • toast
  • stack
  • safe area
Related pattern

A mobile bottom stack is a distinct placement and density system, not a desktop corner toast moved downward.

Live preview

Quick usage

usage
import { BottomToastStack } from "@pinky-ui/systems";

<BottomToastStack />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

Bottom Toast Stack places short-lived feedback near the thumb and compresses multiple messages into a small lower stack. It is a mobile placement and density pattern, not a desktop toast moved down.

Use when

  • A local action needs brief, non-blocking confirmation.
  • The message should remain reachable without covering the top of a reading surface.

Interaction

Add a message, dismiss it explicitly or let it expire. The stack caps its size and the newest message remains prominent.

Accessibility

Use a polite live region for message copy and labelled dismiss buttons. Do not put essential errors only in an auto-expiring toast.

Reduced motion

Insert and remove messages without stack travel or scale animation.

Tune

  • Keep the stack short and the copy actionable.
  • Apply bottom safe-area padding and avoid covering fixed form actions.
Open this skill on its own page