Toast

A component used to notify a user of an action

Basic Usage

The ToastContainer needs to exist throughout your app, so it should be placed at the root of your app.


import { ToastContainer, toast } from '@krakentech/coral';
 
// _app.tsx
<ToastContainer duration={4000} />
 
// YourPage.tsx
<Button onClick={() => toast('Toast content')}>
    Show me the Toast
</Button>

Properties

type


<Button
    onClick={() =>
        toast('Type: warning', {
            type: 'warning',
        })
    }
>
    warning Toast
</Button>

icon


<Button
    onClick={() =>
        toast('Custom icon', {
            icon: <IconRefresh size={16} />,
        })
    }
>
    Toast with custom icon
</Button>
 
<Button onClick={() => toast('No icon here', { icon: false })}>
    Toast without icon
</Button>

delay


<Button onClick={() => toast('1s delay to appear', { delay: 1000 })}>
    Toast delay to appear (1s)
</Button>

dismiss

Note: You’ll need to have a toast open to see this in action.


<Button onClick={() => toast.dismiss()}>Dismiss Toast</Button>

Content

Typically a single line of copy will do the trick. If you need to show a more complex message, you can pass a React component to the toast() function.


<Button
    onClick={() =>
        toast(
            <Stack direction="vertical" gap="none">
                <Typography variant="h6">Title</Typography>
                <Typography variant="body2">Description goes here</Typography>
            </Stack>
        )
    }
>
    Toast with more complex content
</Button>

Event Handling


<Button
    onClick={() =>
        toast('Fire event on close', {
            onClose: () => {},
        })
    }
>
    Toast onClose
</Button>

toast()

The toast() function is used to create a new toast across your application. This will add a new Toast to the ToastContainer queue.

Name	Description	Default
`icon`	The icon to display to the left of the toast body `React.ReactNode`, `false`	`undefined`
`onClose`	A callback function for when the toast is close	`() => void`
`toastId`	A unique ID for the toast	`undefined`
`type`	The type of toast to render `default`, `info`, `warning`, `error`, `succes`	`default`
`delay`	The amount of time in milliseconds to wait before the Toast will display	`0`
`dismiss()`	A function to call to dismiss all toasts, or a single toast if an ID is provided


toast(<div>Toast content</div>, { type: 'warning' });