Bug reportOct 17, 2026· 0:28· 0 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 report— by SceneRecap AI
lowToast component layout / flex alignment rules in stacked toast containers
os: macOSvite: 8.3.4react: 19.3.0heroui: 3.2.6browser: Chromium 151.0.7922.34tailwindcss: 4.3.3
Repro steps
- 1.Click '1. Standalone success' to verify the control case displays proper indicator and title alignment, then click 'Clear all toasts'.
- 2.Click '4. Create an interactive danger toast' to open an interactive toast notification.
- 3.Click the 'Spawn success toast' button located inside the interactive danger toast card.
- 4.Observe the indicator icon and title alignment in the spawned toast notification, then click 'Spawn success toast' a second time.
Expected
The toast status indicator icon and title text should be vertically aligned and centered identically to standalone toasts.
Actual
The indicator icon and title text are vertically misaligned when a success toast is spawned into the stack from within the interactive toast.
Evidence
visualControl case: Standalone success toast at 5.0s renders with status indicator icon and title text properly aligned horizontally and vertically centered.
visualFirst failure: The spawned success toast appears at 17.0s with the indicator icon vertically misaligned with the title text 'Success toast spawned from inside the danger toast'.
visualSecond spawned success toast at 23.0s reproduces the identical vertical misalignment between the indicator icon and title text within the stack.
Issue markdown (copy-paste ready)
### Summary In HeroUI 3.2.6, spawning a success toast from within an interactive danger toast causes the status indicator icon and the title text to vertically misalign in the toast stack. ### Environment - **Browser:** Chromium 151.0.7922.34 (macOS) - **HeroUI:** 3.2.6 - **React:** 19.3.0 - **Tailwind CSS:** 4.3.3 - **Vite:** 8.3.4 ### Control Case - At `2.8s` - `9.0s`, clicking **1. Standalone success** renders a standalone success toast where the indicator icon and title text are properly aligned and vertically centered. ### Steps to Reproduce 1. Click button **4. Create an interactive danger toast** (`11.6s`). 2. In the displayed interactive danger toast, click the internal button **Spawn success toast** (`15.7s`). 3. Inspect the newly spawned stacked success toast at `17.0s`. 4. Click **Spawn success toast** again at `21.6s` to add a second success toast. ### Expected Behavior The toast indicator icon and title should maintain proper vertical centering and baseline alignment. ### Actual Behavior The indicator icon is vertically offset relative to the title text across the first two stacked success toasts. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →