@itwin/itwinui-react/esm/core/Toast/Toast.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
export type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
export type ToastProps = {
    /**
     * Internal id of the toast. Used for closing the toasts.
     */
    id: number;
    /**
     * Content of the Toast message
     */
    content: React.ReactNode;
    /**
     * Passes props to toast and content
     */
    domProps?: {
        toastProps?: React.ComponentProps<'div'>;
        contentProps?: React.ComponentProps<'div'>;
    };
    /**
     * Category of the Toast, which controls the border color, as well as the category icon.
     */
    category: ToastCategory;
    /**
     * 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.
     * @default 'temporary'
     */
    type?: 'persisting' | 'temporary';
    /**
     * Controlled boolean prop indicating whether the toast is visible.
     */
    isVisible?: boolean;
    /**
     * Duration of the toast in millisecond.
     * @default 7000
     */
    duration?: number;
    /**
     * Boolean indicating when the close button is visible.
     * When false, the toast will not have any close button.
     */
    hasCloseButton?: boolean;
    /**
     * Props for a button/link that can be used to perform an action
     * (e.g. to show additional information).
     */
    link?: {
        title: string;
    } & Omit<React.ComponentPropsWithoutRef<'button'>, 'children'>;
    /**
     * Function called when the toast is all the way closed.
     */
    onRemove?: () => void;
    /**
     * Element to which the toast will animate out to.
     */
    animateOutTo?: HTMLElement | null;
};
/**
 * Generic Toast Component
 * @example
 * <Toast type='persisting' content='Job processing completed.' category='positive' link={{onClick:() => {alert('Link callback')}, title:'View the report'}} />
 * <Toast type='temporary' content='Processing completed.' category='positive' />
 * <Toast type='temporary' content='26 files are available for synchronization.' category='informational' />
 * <Toast type='persisting' content='Job processing error.' category='negative' />
 */
export declare const Toast: (props: ToastProps) => React.JSX.Element | null;
export type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVisible' | 'onRemove' | 'domProps'> & {
    onClose?: () => void;
    contentProps?: React.ComponentProps<'div'>;
};
/**
 * The presentational part of a toast, without any animation or logic.
 * @private
 */
export declare const ToastPresentation: PolymorphicForwardRefComponent<"div", ToastPresentationProps>;