Positions

Control where your toasts appear on the screen with 6 different position options.

Available Positions

<Toaster position="top-right" />     // Top right (default)
<Toaster position="top-left" />       // Top left
<Toaster position="top-center" />     // Top center
<Toaster position="bottom-right" />   // Bottom right
<Toaster position="bottom-left" />    // Bottom left
<Toaster position="bottom-center" />  // Bottom center

Set Globally

Set the default position for all toasts in your Toaster component:

import { Toaster } from 'vibe-toast';

function App() {
  return (
    <>
      <Toaster position="bottom-right" />
      <YourApp />
    </>
  );
}

Override Per Toast Override the position for individual toasts:

// This toast will appear at top-left regardless of global setting
toast.success('Important message!', { 
  position: 'top-left' 
});
💡

Tip

Choose positions strategically based on your UI. Top-right works well for most apps, while bottom positions are great for mobile.