> ## Documentation Index
> Fetch the complete documentation index at: https://veekthoven-laravel-inertia-toast-24-61.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Toast positions

> Configure where toasts appear on screen with six different position options

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

<Info>
  These positions are defined in the `ToastPosition` enum at `src/Enums/ToastPosition.php` in the package source code.
</Info>

## 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:

```bash theme={null}
php artisan vendor:publish --tag=inertia-toast-config
```

```php config/inertia-toast.php theme={null}
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:

```js resources/js/app.js theme={null}
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:

```jsx resources/js/app.tsx theme={null}
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.

<Tip>
  If you need different positions for different types of notifications, consider using different toast instances or implementing a custom wrapper around the toast functionality.
</Tip>

## 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"

<Warning>
  Avoid choosing positions that might overlap with important UI elements like navigation menus, action buttons, or floating chat widgets.
</Warning>