Overview
The Toast component displays temporary notifications with support for multiple variants (info, success, warning, error), actions, and automatic stacking.Basic Usage
- Code
- Preview
Variants
- Code
- Preview
With Action
- Code
- Preview
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Toast notification component with multiple variants and stacking support
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"
/>
</>
); }
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={() => {}}
/>
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={() => {}}
/>