Toast

Temporary notification that appears briefly to confirm an action or provide feedback.

Types

Toasts support different visual styles to convey different types of information:

Show code
Hide code
 
import {
  Button,
  ToastProvider,
  useToastManager,
} from '@mylighthouse/prism-react';

export default function ToastTypes(): React.JSX.Element {
  return (
    <ToastProvider>
      <ToastTypesOptions />
    </ToastProvider>
  );
}

function ToastTypesOptions(): React.JSX.Element {
  const { add } = useToastManager();

  function createInformationToast(): void {
    add({ type: 'information', message: 'This is an information toast' });
  }

  function createSuccessToast(): void {
    add({ type: 'success', message: 'Operation completed successfully' });
  }

  function createCriticalToast(): void {
    add({ type: 'critical', message: 'A critical error occurred' });
  }

  function createWarningToast(): void {
    add({ type: 'warning', message: 'Warning: Please check your input' });
  }

  function createAutomationOnToast(): void {
    add({ type: 'automation-on', message: 'Automation has been enabled' });
  }

  function createAutomationOffToast(): void {
    add({ type: 'automation-off', message: 'Automation has been disabled' });
  }

  return (
    <>
      <Button buttonType="secondary" onClick={createInformationToast}>
        Information
      </Button>
      <Button buttonType="secondary" onClick={createSuccessToast}>
        Success
      </Button>
      <Button buttonType="secondary" onClick={createCriticalToast}>
        Critical
      </Button>
      <Button buttonType="secondary" onClick={createWarningToast}>
        Warning
      </Button>
      <Button buttonType="secondary" onClick={createAutomationOnToast}>
        Automation On
      </Button>
      <Button buttonType="secondary" onClick={createAutomationOffToast}>
        Automation Off
      </Button>
    </>
  );
}

Timeout

The timeout controls how long a toast remains visible before it is automatically dismissed. The default timeout is 5000ms (5 seconds). Setting the timeout to 0 creates a persistent toast, which stays on screen until the user closes it. You can also set the timeout to 8000ms (8 seconds) for longer visibility.

Show code
Hide code
 
import {
  Button,
  ToastProvider,
  useToastManager,
} from '@mylighthouse/prism-react';

export default function ToastTimeout(): React.JSX.Element {
  return (
    <ToastProvider>
      <ToastTimeoutOptions />
    </ToastProvider>
  );
}

function ToastTimeoutOptions(): React.JSX.Element {
  const { add } = useToastManager();

  function createDefaultTimeout(): void {
    add({ type: 'information', message: 'Default timeout (5 seconds)' });
  }
  function createLongTimeout(): void {
    add({
      type: 'success',
      message: 'Long timeout (8 seconds)',
      timeout: 8000,
    });
  }

  function createPersistentToast(): void {
    add({
      type: 'warning',
      message: 'Persistent toast (never auto-dismisses)',
      timeout: 0,
    });
  }

  return (
    <>
      <Button buttonType="secondary" onClick={createDefaultTimeout}>
        Default (5s)
      </Button>
      <Button buttonType="secondary" onClick={createLongTimeout}>
        Long (8s)
      </Button>
      <Button buttonType="secondary" onClick={createPersistentToast}>
        Persistent (0)
      </Button>
    </>
  );
}

Actions

Toasts can include action buttons to allow users to perform related tasks directly from the notification.

Show code
Hide code
 
import {
  Button,
  ToastProvider,
  useToastManager,
} from '@mylighthouse/prism-react';

export default function ToastAction(): React.JSX.Element {
  return (
    <ToastProvider>
      <ToastActionOptions />
    </ToastProvider>
  );
}

function ToastActionOptions(): React.JSX.Element {
  const { add } = useToastManager();

  function createActionToast(): void {
    add({
      type: 'information',
      message: 'Toast with an action',
      action: {
        children: 'Click here',
        onClick() {
          console.log('Action clicked');
        },
      },
    });
  }

  return (
    <>
      <Button buttonType="secondary" onClick={createActionToast}>
        Action
      </Button>
    </>
  );
}

Update & close

Use update to change a toast’s properties after it has been added, and close to dismiss it programmatically. In the example below, clicking “Undo” puts the action into a loading state via update, then closes the original toast and shows a success confirmation via close and add.

Show code
Hide code
 
import {
  Button,
  ToastProvider,
  useToastManager,
} from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function ToastUpdate(): React.JSX.Element {
  return (
    <ToastProvider>
      <ToastUpdateExample />
    </ToastProvider>
  );
}

function ToastUpdateExample(): React.JSX.Element {
  const { add, close, update } = useToastManager();
  const [isActive, setIsActive] = useState(false);

  function handleArchive(): void {
    setIsActive(true);

    const id = add({
      type: 'information',
      message: '1 item archived',
      timeout: 0,
      action: {
        children: 'Undo',
        onClick() {
          update(id, { action: { children: 'Undo', isLoading: true } });

          setTimeout(() => {
            close(id);
            setIsActive(false);
            add({ type: 'success', message: 'Archive undone' });
          }, 1500);
        },
      },
    });
  }

  return (
    <Button
      buttonType="secondary"
      isDisabled={isActive}
      onClick={handleArchive}
    >
      Archive item
    </Button>
  );
}

API

ToastProvider

Wrap your application or component tree with ToastProvider to enable toast functionality.

<ToastProvider>
  <YourApp />
</ToastProvider>

useToastManager

Hook that returns methods to manage toasts:

const { add, update, close } = useToastManager();

// Add method — returns an id
const id = add({ type: 'information', message: 'Your message' });

// Update method — change properties of an existing toast
update(id, { action: { children: 'Undo', isLoading: true } });

// Close method — dismiss a toast programmatically
close(id);