Repository navigation
Dismissal button is misaligned on Toast when the content appears in more than one row #9936
Description
Provide a general summary of the issue here
When content occupies more than a row in a toast with action button, observing that the dismissal button appears misaligned.
🤔 Expected Behavior?
Dismissal button should be aligned.
😯 Current Behavior
Dismissal button appears misaligned.
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
- Use ToastContainer with ToastQueue with action button of any variant with text such that more than one row is required. Example: info variant with text as "An Update is available in the app." with Update Action button.
- Observer the dismissal button.
Version
1.0.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
All browsers, issue is not browser specific.
What operating system are you using?
MACARM
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
Activity
DEVANSHBANSAL789 commentedon Apr 16, 2026
Hi
I’d like to work on this issue.
From my understanding, when the toast message goes into multiple lines with an action button, the dismissal button becomes misaligned likely due to layout or flex alignment inconsistencies in the Toast component.
I plan to fix the layout so the dismissal button stays properly aligned.
I’ve started looking into the code so I can fix it soon.
devongovett commentedon Apr 24, 2026
Looks like the problem isn't with the button but with the text. According to the Spectrum tokens, the space between the text and the edge should be the same whether it's wrapping or not. We implemented it using vertical centering instead.
snowystinger commentedon Apr 24, 2026
dinesh-0062 commentedon May 7, 2026
Hi @devongovett @snowystinger, since there hasn't been an update on this for 2 weeks, I'd love to take this over. I understand the goal is to move away from vertical centering and align the text and dismissal button according to Spectrum tokens (fixed top spacing). I'm ready to dig into the CSS/Spectrum tokens and submit a PR. Can I be assigned?
snowystinger commentedon May 8, 2026
Go for it, we don't really make use of the
assigned. I don't know that you'll need to dig into the spectrum tokens, you should just be able to use our center baseline helpers like we have insideButtonand various other components