Bug reportOct 23, 2026· 0:28· 8 views
HeroUI 3.2.6: success toast indicator misaligns when spawned from inside an interactive danger toast
0:28 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
lowHeroUI Toast: indicator/title vertical alignment when a toast is added from inside another toast's content (stacking/layout of the toast region)
os: macOSdpr: 1url: /heroui-toast-reprostack: HeroUI 3.2.6, React 19.3.0, Tailwind CSS 4.3.3, Vite 8.3.4, official @import "@heroui/styles" setuplocale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720
Repro steps
- 1.Open /heroui-toast-repro.
- 2.Click "Clear all toasts" so no toasts are visible.
- 3.Click "4. Create an interactive danger toast".
- 4.Inside the danger toast, click "Spawn success toast".
- 5.Click "Spawn success toast" again without clearing the stack.
- 6.Compare the check icon position with the title text in each spawned success toast.
Expected
The check icon in a success toast is vertically level with its title text. This matches the standalone success toast from case 1 at 5.0s.
Actual
Each success toast spawned from inside the danger toast shows its check icon higher than its title line. This is visible at 17.0s after the first click and at 23.0s for both spawned toasts after the second click.
Evidence
visualControl case: the "Standalone success toast" from case 1 renders with its check icon level with the title text.
visualControl case still correct: the standalone toast remains level while hovered and the close (x) control appears.
visualDanger toast created by case 4 shows its indicator and title as expected, with a "Spawn success toast" button.
visualFirst spawned toast, "Success toast spawned from inside the danger toast", has its check icon raised above the title line.
visualAfter the second click, both spawned success toasts show the same raised check icon relative to their title text. The danger toast is pushed down to third position.
visualNo third "Spawn success toast" click is recorded before the end. The page's claim that the third click restores alignment is not shown in this recording.
Issue markdown (copy-paste ready)
## Summary In HeroUI 3.2.6, a success toast spawned from a button inside an interactive danger toast renders its check icon above its title line. A standalone success toast renders correctly. ## Environment - Chromium 151.0.7922.34, macOS, 1280x720, dpr 1 - HeroUI 3.2.6, React 19.3.0, Tailwind CSS 4.3.3, Vite 8.3.4 - Official `@import "@heroui/styles"` setup, no custom theme or Toast CSS ## Steps to reproduce 1. Open `/heroui-toast-repro` (0.0s). 2. Click **Clear all toasts** (9.9s). 3. Click **4. Create an interactive danger toast** (11.7s). 4. Inside the danger toast, click **Spawn success toast** (15.9s). 5. Click **Spawn success toast** again without clearing (22.0s). ## Expected The check icon is vertically level with the title text, as in the standalone success toast (5.0s). ## Actual Each spawned success toast shows the check icon raised above the title line (17.0s, 23.0s). ## Evidence - 5.0s: Control. "Standalone success toast" has the icon level with the title. - 17.0s: First spawned success toast has a raised icon. - 23.0s: Both spawned success toasts have a raised icon. The danger toast is third in the stack. - No third click is recorded, so the claimed restoration of alignment on the third click is not verified here. ## Suggested area Toast indicator/title alignment when a toast is added from inside another toast's content. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →