@stihl-design-system/components/components/Toast/Toast.d.ts

Welcome to the STIHL Design System react component library.

import { HTMLAttributes } from 'react';
import { ToastVariant } from './Toast.utils';
export interface ToastProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
    /** Message displayed in the Toast. */
    message: string;
    /** Custom data attributes. */
    [key: `data-${string}`]: string | undefined;
    /** Close button props:
     *
     * `data-*`: Custom data attributes.
     *
     * `label`: Accessibility label for the close button.
     * (default) 'Close notification'
     */
    closeButtonProps?: {
        [key: `data-${string}`]: string | undefined;
        label?: string;
    };
    /** Hides the icon of the Toast.
     * @default false
     */
    hideIcon?: boolean;
    /** Visual style variant of the Toast.
     * @default 'info'
     */
    variant?: ToastVariant;
    /** Used by the ToastManager to clear the timeout of the toast removal. */
    onClick: () => void;
    /** Used by the ToastManager to clear the timeout of the toast removal. */
    onMouseEnter: () => void;
    /** Used by the ToastManager to start timeout of the toast removal again. */
    onMouseLeave: () => void;
}
/**
 * Toasts are small, non-intrusive messages that appear temporarily to provide feedback or information.
 *
 * Design in Figma: [Toast](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=8844-4923)
 *
 * <div className="ds-info">For more information on the different types of notifications and to determine which is best suited for your needs, please refer to our [Notification Guidelines](/docs/templates-notification-guidelines--documentation) and explore the decision trees provided.</div>
 *
 * */
export declare const DSToast: import('react').ForwardRefExoticComponent<ToastProps & import('react').RefAttributes<HTMLDivElement>>;