Skip to main content

​
Overview

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

​
Basic Usage

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"
  />
</>
); }

​
Variants

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={() => {}}
/>

​
With Action

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={() => {}}
/>

​
Props