Toast | iTwinUI

A Toast is a non modal, unobtrusive window element used to display small amount of information to a user.

This page has not yet been finished and is being worked on. In the meantime, you can view the stories.

import * as React from 'react';
import { useToaster, Button } from '@itwin/itwinui-react';

export default () => {
  const toaster = useToaster();

  return (
    <Button
      onClick={() => {
        toaster.setSettings({
          placement: 'bottom-end',
          order: 'ascending',
        });
        toaster.positive('Job processing completed.', {
          hasCloseButton: true,
          link: {
            onClick: () => {},
            title: 'View the report',
          },
        });
      }}
    >
      Open toast
    </Button>
  );
};

A toast notification provides a brief message about app processes at the top of the screen. Because these messages are so prominent, we need to be careful not to overuse or misuse them.

Props

Prop	Description	Default
id	Internal id of the toast. Used for closing the toasts. number
content	Content of the Toast message ReactNode
domProps	Passes props to toast and content { toastProps?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>; contentProps?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>; }
category	Category of the Toast, which controls the border color, as well as the category icon. ToastCategory
type	The Type of the Toast. Persisting Toasts will not be closed automatically, and will contain a close button. Temporary Toasts will automatically close after 7 seconds and will not contain a close button. "persisting" \| "temporary"	'temporary'
isVisible	Controlled boolean prop indicating whether the toast is visible. boolean
duration	Duration of the toast in millisecond. number	7000
hasCloseButton	Boolean indicating when the close button is visible. When false, the toast will not have any close button. boolean
link	Props for a button/link that can be used to perform an action (e.g. to show additional information). { title: string; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children">
onRemove	Function called when the toast is all the way closed. () => void
animateOutTo	Element to which the toast will animate out to. HTMLElement