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

# Interfaces

> TypeScript interfaces for Vue and React components

## ToastLevel

TypeScript type representing the severity level of a toast notification.

```typescript theme={null}
type ToastLevel = 'success' | 'error' | 'info' | 'warning'
```

This type corresponds to the PHP `ToastLevel` enum values. See the [Enums](/api/types/enums#toastlevel) page for more details.

***

## ToastMessage

Represents a single toast notification message with its properties.

### Properties

<ResponseField name="message" type="string" required>
  The main content of the toast notification.
</ResponseField>

<ResponseField name="level" type="ToastLevel" required>
  The severity level of the toast. Must be one of: `'success'`, `'error'`, `'info'`, or `'warning'`.
</ResponseField>

<ResponseField name="title" type="string | null" required>
  Optional title displayed above the message. Pass `null` if no title is needed.
</ResponseField>

<ResponseField name="duration" type="number | null" required>
  Custom duration in milliseconds for this specific toast. If `null`, uses the default duration from `ToastConfig`.
</ResponseField>

### Source

```typescript theme={null}
export interface ToastMessage {
  message: string
  level: ToastLevel
  title: string | null
  duration: number | null
}
```

### Usage example

<CodeGroup>
  ```typescript Vue theme={null}
  import type { ToastMessage } from '@inertiatoast/vue'

  const toast: ToastMessage = {
    message: 'User created successfully',
    level: 'success',
    title: 'Success',
    duration: 3000
  }
  ```

  ```typescript React theme={null}
  import type { ToastMessage } from '@inertiatoast/react'

  const toast: ToastMessage = {
    message: 'Failed to save changes',
    level: 'error',
    title: 'Error',
    duration: null // Use default duration
  }
  ```
</CodeGroup>

***

## ToastItem

Extends `ToastMessage` with a unique identifier. Used internally by the Toaster component to track individual toasts.

### Properties

Inherits all properties from `ToastMessage`:

<ResponseField name="id" type="string" required>
  Unique identifier for the toast. Generated automatically by the Toaster component.
</ResponseField>

<ResponseField name="message" type="string" required>
  The main content of the toast notification (inherited from `ToastMessage`).
</ResponseField>

<ResponseField name="level" type="ToastLevel" required>
  The severity level of the toast (inherited from `ToastMessage`).
</ResponseField>

<ResponseField name="title" type="string | null" required>
  Optional title displayed above the message (inherited from `ToastMessage`).
</ResponseField>

<ResponseField name="duration" type="number | null" required>
  Custom duration in milliseconds (inherited from `ToastMessage`).
</ResponseField>

### Source

```typescript theme={null}
export interface ToastItem extends ToastMessage {
  id: string
}
```

### Usage example

```typescript theme={null}
import type { ToastItem } from '@inertiatoast/vue'

const toastWithId: ToastItem = {
  id: 'toast-1234',
  message: 'Settings updated',
  level: 'info',
  title: null,
  duration: null
}
```

<Note>
  You typically don't need to create `ToastItem` objects manually. The Toaster component automatically generates IDs for incoming `ToastMessage` objects.
</Note>

***

## ToastConfig

Configuration object for the Toaster component. Defines global settings for toast behavior and appearance.

### Properties

<ResponseField name="duration" type="number" required>
  Default duration in milliseconds for all toasts. Can be overridden per toast using `ToastMessage.duration`.

  **Default:** `3000`
</ResponseField>

<ResponseField name="position" type="string" required>
  Screen position where toasts appear. Must be one of: `'top-right'`, `'top-left'`, `'top-center'`, `'bottom-right'`, `'bottom-left'`, or `'bottom-center'`.

  **Default:** `'top-right'`
</ResponseField>

<ResponseField name="maxVisible" type="number" required>
  Maximum number of toasts that can be visible simultaneously. Older toasts are dismissed when the limit is reached.

  **Default:** `3`
</ResponseField>

<ResponseField name="propKey" type="string" required>
  The Inertia prop key used to receive toast messages from the backend.

  **Default:** `'toasts'`
</ResponseField>

### Source

```typescript theme={null}
export interface ToastConfig {
  duration: number
  position: string
  maxVisible: number
  propKey: string
}
```

### Usage examples

<CodeGroup>
  ```typescript Vue theme={null}
  import { Toaster } from '@inertiatoast/vue'

  <Toaster 
    :duration="5000"
    position="bottom-right"
    :max-visible="5"
    prop-key="toasts"
  />
  ```

  ```typescript React theme={null}
  import { Toaster } from '@inertiatoast/react'

  <Toaster 
    duration={5000}
    position="bottom-right"
    maxVisible={5}
    propKey="toasts"
  />
  ```

  ```php PHP - Backend configuration theme={null}
  // config/inertia-toast.php
  return [
      'duration' => 5000,
      'position' => 'bottom-right',
      'max_visible' => 5,
      'prop_key' => 'toasts',
  ];
  ```
</CodeGroup>

<Note>
  The configuration values are set in `config/inertia-toast.php` and automatically passed to the frontend. You can override them by passing props to the Toaster component.
</Note>

***

## Type locations

Both Vue and React packages share identical TypeScript interfaces:

* **Vue:** `@inertiatoast/vue/src/types.ts`
* **React:** `@inertiatoast/react/src/types.ts`

You can import them using:

```typescript theme={null}
import type { ToastMessage, ToastItem, ToastConfig, ToastLevel } from '@inertiatoast/vue'
// or
import type { ToastMessage, ToastItem, ToastConfig, ToastLevel } from '@inertiatoast/react'
```