Alignment in Alert actions (vs Snackbar)
Open
@brijeshb42 is already working on this.
Since Jun 25, 2025.
customization: dom
scope: alert
scope: toast
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Steps:
- Open this link to live example: https://stackblitz.com/edit/github-njmtmubh?file=src%2FApp.tsx
- Observe the difference between a regular Snackbar, and a Snackbar with Alert
Current behavior
The demo shows the stark difference in (default!) alignment between the two. The regular snackbar actions are neatly aligned, whereas the Alert actions are not.
Expected behavior
Alert actions should be middle-aligned like in the Snackbar. For neatness, as well as for consistency.
Context
It probably shouldn't matter whether an Alert is in a Snackbar or not - I'm only putting it there because (1) I want to use it like that and (2) it shows the difference more clearly I think.
Your environment
npx @mui/envinfo
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 22.16.0 - C:\Program Files\nodejs\node.EXE
npm: 11.4.2 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: 137.0.7151.120
Edge: Chromium (137.0.3296.83)
Search keywords: alert action alignment
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.