Feedback

Toast

A toast displays a short message related to an action performed by a user.
View source
Hello World!
1
import {Toast} from '@coveord/plasma-react';
2


3
const Demo = () => <Toast title="Hello World!" type="success" />;
4
export default Demo;

Props

NameTypeDefaultDescription
animateboolean
Whether the toast has an animation upon entry
childrenReactNode
classNamestring
Additional css classes that the toast should have
dismissnumber
Timeout in ms after which the toast should disappear by itself
idstring
Unique identifier of the toast. Usefull to retrieve a specific toast in the redux state.
onClose() => void
Callback function that will run after the toast is dismissed
titleReactNode
The content of the toast
type"success" | "warning" | "error" | "info" | "download""success"
The type of the toast
contentdeprecatedReactNode
Use children instead
dismissibledeprecatedboolean
Toast are always dismissible by the user - will have no effect
isSmalldeprecatedboolean
Do not use - will have no effect
onDestroydeprecated() => void
Use onClose instead
onRenderdeprecated() => void

Examples

Download Toast
Preparing file for download...
some_file.csv
1
import {Toast} from '@coveord/plasma-react';
2


3
const Demo = () => (
4
    <Toast title="Preparing file for download..." type="download">
5
        <div>some_file.csv</div>
6
    </Toast>
7
);
8
export default Demo;
Toast Notifier
1
import {useDispatch} from 'react-redux';
2
import {addToast, Button, IDispatch, ToastContainerConnected} from '@coveord/plasma-react';
3


4
const ShowToastButton: React.FunctionComponent = () => {
5
    const dispatch: IDispatch = useDispatch();
6
    return (
7
        <Button
8
            onClick={() => {
9
                dispatch(
10
                    addToast('toast-container-id', 'Hello World!', {
11
                        dismiss: 3000,
12
                        type: 'error',
13
                    }),
14
                );
15
            }}
16
        >
17
            Show toast
18
        </Button>
19
    );
20
};
21


22
const Demo = () => (
23
    <>
24
        <ToastContainerConnected id="toast-container-id" />
25
        <ShowToastButton />
26
    </>
27
);
28
export default Demo;

Best Practices

  • Only include information that is relevant to the performed action.
  • Toasts may contain actions or links, preferably only one.
  • Toasts should not prevent users from interacting with the page content. However, if it is unavoidable, consider using a prompt modal instead.

Variations

The result of the operation triggering the toast determines the type of toast to display.

TypePurpose
SuccessConfirms if operation was successfully executed. When the toast contains a link or action, it must be dismissed manually by the user. If not, it disappears automatically.
WarningNotifies users when the operation they launched may have not yet be completed, or may not have had the expected result. When the toast contains a link or action, it has to be manually dismissed by the user. If not, it disappears automatically.
ErrorNotifies users about an unsuccessful operation. The toast must be manually dismissed by users so that they don't miss this critical information.

Related Components

If your use case doesn't match the guidelines above, consider using one of the following components instead:

  • Prompt modal - When users shouldn't be able to interact with the page content while the message is displayed.
  • Info box - When the message isn't related to an action the user has performed.
  • Tooltip - When you want to provide additional information about an element on screen.
Edit guidelines