Shadcn.io is not affiliated with official shadcn/ui
Bottom Center Position
Toast notification centered at bottom of viewport for balanced visibility without corner bias favoring neither side
Corners feel sided—left or right—but some messages belong to everyone. This React toast uses Sonner's position option set to bottom-center to display notifications at the bottom-center of the viewport. Built with shadcn/ui Button and position property, centered bottom positioning creates symmetrical placement that feels neutral and app-wide rather than contextual to screen edges—perfect for success confirmations, form submissions, save notifications, neutral system messages, or any feedback where centered emphasis balances importance without the critical urgency of top-center or the peripheral feel of corner positions.
Bottom Center Position preview
Installation
Related Components
Bottom Right Position
Default bottom-right positioning
Bottom Left Position
Bottom-left corner placement
Top Center Position
Critical centered top positioning
Standard Toast
Basic toast notification
Success Toast
Success notification variant
Success Alert
Persistent success alert component
FAQ
Was this page helpful?
Sign in to leave feedback.