Toast API

Import

Cimpress UI exports two toast-related APIs:

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

import { toastQueue, ToastRegion } from '@cimpress-ui/react';

Usage

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

App.tsx

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

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

You can now add toasts by using the toastQueue API:

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

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

Accessibility notes

ToastRegion renders a region landmark with an automatically generated label that identifies it to assistive technologies.

If a focused toast is dismissed, focus is automatically moved to the next toast (if available) or to where it was before entering the landmark.

API reference

toastQueue

The toastQueue API provides methods to add and manage toasts.

Adding toasts

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

toastQueue.info('This is an info toast');
toastQueue.success('This is a success toast');
toastQueue.warning('This is a warning toast');
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 { toastQueue } from '@cimpress-ui/react';

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

Closing toasts

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

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

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

Clearing the queue

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

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

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.