> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Toast

> Toast notification component with multiple variants and stacking support

export const ToastWithActionPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToastWithAction" frameBorder="0" width="100%" height="300"></iframe>;

export const ToastVariantsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToastVariants" frameBorder="0" width="100%" height="500"></iframe>;

export const ToastBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToastBasic" frameBorder="0" width="100%" height="300"></iframe>;

## Overview

The Toast component displays temporary notifications with support for multiple variants (info, success, warning, error), actions, and automatic stacking.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Toast } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';
    import { Button } from '@peppermint-design/devreadykit-custom';

    export default function ToastBasic() {
      const [open, setOpen] = useState(false);

    return (

    <>
      <Button onClick={() => setOpen(true)}>Show Toast</Button>
      <Toast
        open={open}
        onClose={() => setOpen(false)}
        title="Notification"
        description="This is a toast message"
      />
    </>
    ); }

    ```
  </Tab>

  <Tab title="Preview">
    <ToastBasicPreview />
  </Tab>
</Tabs>

## Variants

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Toast } from '@peppermint-design/devreadykit-custom';

    <Toast
      open={true}
      variant="info"
      title="Info"
      description="Information message"
      onClose={() => {}}
    />

    <Toast
      open={true}
      variant="success"
      title="Success"
      description="Operation completed"
      onClose={() => {}}
    />

    <Toast
      open={true}
      variant="warning"
      title="Warning"
      description="Warning message"
      onClose={() => {}}
    />

    <Toast
      open={true}
      variant="error"
      title="Error"
      description="Error occurred"
      onClose={() => {}}
    />
    ```
  </Tab>

  <Tab title="Preview">
    <ToastVariantsPreview />
  </Tab>
</Tabs>

## With Action

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Toast } from '@peppermint-design/devreadykit-custom';

    <Toast 
      open={true}
      title="File uploaded"
      description="Your file has been uploaded successfully"
      actionLabel="View"
      onAction={() => console.log('View clicked')}
      onClose={() => {}}
    />
    ```
  </Tab>

  <Tab title="Preview">
    <ToastWithActionPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  \| Prop | Type | Default | Description |
  \|:------|:------|:---------|:-------------| | open | `boolean` | - | Whether
  toast is visible | | onClose | `() => void` | - | Close handler | | title |
  `string` | - | Toast title | | description | `string` | - | Toast description
  \| | variant | `"info" \| "success" \| "warning" \| "error"` | `"info"` | Toast
  variant | | actionLabel | `string` | - | Action button label | | onAction |
  `() => void` | - | Action button handler | | duration | `number` | `100000` |
  Auto-dismiss duration (ms) | | dismissible | `boolean` | `true` | Show close
  button | | offset | `number` | `20` | Top offset in pixels | | className |
  `string` | - | Additional CSS classes |
</PropsTable>