Skip to main content
Laravel Inertia Toast supports six different positions for displaying toasts on screen. You can configure the position globally in your application or override it per-toast.

​
Available positions

The package provides the following position options:
  • top-right - Top right corner (default)
  • top-left - Top left corner
  • top-center - Top center of the screen
  • bottom-right - Bottom right corner
  • bottom-left - Bottom left corner
  • bottom-center - Bottom center of the screen
These positions are defined in the ToastPosition enum at src/Enums/ToastPosition.php in the package source code.

​
Global configuration

You can set the default position for all toasts in your application.

​
Backend (PHP)

Publish the config file and set the position option: 
php artisan vendor:publish --tag=inertia-toast-config
config/inertia-toast.php
return [
    'position' => 'top-right', // Change to any of the 6 positions
    'duration' => 5000,
    'max_visible' => 5,
    'prop_key' => 'toasts',
];

​
Frontend (Vue 3)

Set the position when registering the plugin:
resources/js/app.js
import { createApp } from 'vue'
import { InertiaToast } from '@laravel-inertia-toast/vue'

const app = createApp(App)
app.use(InertiaToast, {
    position: 'bottom-right',
    duration: 5000,
    maxVisible: 5,
})
app.mount('#app')

​
Frontend (React)

Set the position in the ToastProvider config:
resources/js/app.tsx
import { createRoot } from 'react-dom/client'
import { ToastProvider, Toasts } from '@laravel-inertia-toast/react'

setup({ el, App, props }) {
    const root = createRoot(el)

    root.render(
        <ToastProvider
            config={{
                position: 'bottom-right',
                duration: 5000,
                maxVisible: 5,
            }}
        >
            <App {...props} />
            <Toasts />
        </ToastProvider>
    )
}

​
Per-toast position override

Currently, the package supports setting a global position that applies to all toasts. Individual per-toast position overrides are not supported in the current version.
If you need different positions for different types of notifications, consider using different toast instances or implementing a custom wrapper around the toast functionality.

​
Position behavior

Toasts will stack vertically within their configured position:
  • Top positions (top-right, top-left, top-center): New toasts appear at the top of the stack, pushing older toasts down
  • Bottom positions (bottom-right, bottom-left, bottom-center): New toasts appear at the bottom of the stack, pushing older toasts up
When the maximum number of visible toasts is reached (configured via max_visible), the oldest toast is automatically removed to make room for the new one.

​
Choosing the right position

Here are some guidelines for choosing toast positions:
  • top-right - Most common choice, doesn’t interfere with main content
  • top-center - Best for important notifications that need immediate attention
  • bottom-right - Good alternative to top-right, keeps the top of the screen clear
  • top-left - Useful if your UI has important elements in the top-right
  • bottom-left - Less common, but works well with certain layouts
  • bottom-center - Great for action confirmations like “Item deleted” or “Saved”
Avoid choosing positions that might overlap with important UI elements like navigation menus, action buttons, or floating chat widgets.