Toast API

Caution

This component is currently in an unstable state and may undergo significant changes in future releases.

Import

Cimpress UI exports two toast-related APIs:

• toastQueue: queue of toasts, used to add toasts.
• ToastRegion: renders a region that displays toasts.

import { UNSTABLE_toastQueue, UNSTABLE_ToastRegion } from '@cimpress-ui/react';

Usage

Make sure to render the ToastRegion component in your application to display toasts.

App.tsx

import { UNSTABLE_ToastRegion } from '@cimpress-ui/react';

export function App() {
  return (
    <>
      <UNSTABLE_ToastRegion />
      // Your app code here...
    </>
  );
}

You can now add toasts by using the toastQueue API:

import { UNSTABLE_toastQueue } from '@cimpress-ui/react';

UNSTABLE_toastQueue.info('This is an info toast');
UNSTABLE_toastQueue.success('This is a success toast');
UNSTABLE_toastQueue.warning('This is a warning toast');
UNSTABLE_toastQueue.critical('This is a critical toast');

API reference

toastQueue

The toastQueue API provides methods to add and manage toasts.

Adding toasts

import { UNSTABLE_toastQueue } from '@cimpress-ui/react';

UNSTABLE_toastQueue.info('This is an info toast');
UNSTABLE_toastQueue.success('This is a success toast');
UNSTABLE_toastQueue.warning('This is a warning toast');
UNSTABLE_toastQueue.critical('This is a critical toast');

Custom timeout

The timeout option can be used to set the duration for which the toast will be displayed. The minimum timeout is 5000 milliseconds.

import { UNSTABLE_toastQueue } from '@cimpress-ui/react';

UNSTABLE_toastQueue.info('This is an info toast', { timeout: 10000 });

Closing toasts

The close method can be used to close a toast imperatively.

import { UNSTABLE_toastQueue } from '@cimpress-ui/react';

const toastId = UNSTABLE_toastQueue.info('This is an info toast');
UNSTABLE_toastQueue.close(toastId);

Clearing the queue

The clear method can be used to clear the queue of all toasts.

import { UNSTABLE_toastQueue } from '@cimpress-ui/react';

UNSTABLE_toastQueue.clear();

ToastRegion

Displays toast notifications. Toast notifications are non-intrusive messages that appear briefly at the top of the page, overlaying content.

See toast usage guidelines.

This component has no props.