Skip to main content

Toast

Toast in Storybook

Examples​

Check out the Usage section for details about how and when to use the Toast component.

Basic toast​

The toast appears when you click the button and stays on the screen for 5 seconds.

You can set this duration in milliseconds. There is no upper limit to how long the toast can stay on the screen. However, the autoClose timer pauses when you hover over the toast or when the page loses focus.

import React from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const BasicToast = () => {
  
  const handleClick = () => {
    ToastProvider.toast({
      message: 'This is a toast message!',
      autoClose: 5000,
    });
  };

  return (
    <div>
      <ToastProvider />
      <Button
        label="Show toast"
        onClick={handleClick}
      />
    </div>
  );
};

You can add a link inside a toast using the prop linkProps. It accepts all the Link component props. Visit the Link component section to learn more about its usage.

import React from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const ToastLink = () => {
  
  const handleClick = () => {
    ToastProvider.toast({
      message: 'This is a toast message',
      linkProps: {
        children: 'This is a link inside a toast',
        href: 'https://docs.guidewire.com/jutro/documentation/latest/', 
        target: '_blank'
    },
    });
  };

  return (
    <div>
      <Button
        label="Show toast with a link"
        onClick={handleClick}
      />
    </div>
  );
};

Toast types​

The type prop determines the visual style and importance of the toast notification. You can use it to specify the category of the toast message. It accepts the following values:

  • info
  • success
  • warning
  • error
import React from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const ToastTypes = () => {
  
  const showToast = (type, message) => {
    ToastProvider.toast({
      message,
      autoClose: 5000,
      type
    });
  };

  return (
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap'}}>
      <Button
        label="Info toast"
        onClick={() => showToast('info', 'This is an info toast message!')}
      />
      <Button
        label="Success toast"
        onClick={() => showToast('success', 'This is a success toast message!')}
      />
      <Button
        label="Warning toast"
        onClick={() => showToast('warning', 'This is a warning toast message!')}
      />
      <Button
        label="Error toast"
        onClick={() => showToast('error', 'This is an error toast message!')}
      />
    </div>
  );
};

Actions after closing toast​

The onClosed prop allows you to add a function that is called upon closing the toast. In this example, it changes the text of the button. Additionally, it uses the autoFocus prop to change automatically the focus to the toast close button.

import React, { useState } from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const CloseToast = () => {
  const [buttonLabel, setButtonLabel] = useState('Show toast');

  const handleClick = () => {
    ToastProvider.toast({
      message: 'Close this toast to change the button text',
      autoFocus: true,
      autoClose: false,
      toastId: 'errorToast',
      onClosed: () => {
        setButtonLabel('Toast closed');
        setTimeout(() => {
          setButtonLabel('Show toast');
        }, 5000); // 5 seconds delay
      }
    });
  };

  return (
    <div>
      <Button
        label={buttonLabel}
        onClick={handleClick}
      />
    </div>
  );
};