@workday/canvas-kit-react/dist/es6/toast/lib/Toast.d.ts

The parent module that contains all Workday Canvas Kit React components

import { ExtractProps } from '@workday/canvas-kit-react/common';
import { Popup } from '@workday/canvas-kit-react/popup';
export interface ToastProps extends Omit<ExtractProps<typeof Popup.Card, never>, 'model'> {
}
/**
 * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
 *
 * ```tsx
 * import { Toast } from "@workday/canvas-kit-react/toast";
 *
 * const MyToast = (props: CardProps) => (
 *    <Toast mode="dialog" aria-label="notifcation">
 *      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
 *      <Toast.Body>
 *        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
 *        <Toast.Link href="#hreflink">Custom Link</Toast.Link>
 *      </Toast.Body>
 *      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
 *    </Toast>
 * );
 *```
 */
export declare const Toast: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ToastProps & Partial<{
    mode: import("./hooks/useToastModel").AriaRoleMode;
    id: string;
}> & {} & {}, {
    state: {
        id: string;
        mode: import("./hooks/useToastModel").AriaRoleMode;
    };
    events: {};
}> & {
    /**
     * `Toast.Body` should container `Toast.Message` and `Toast.Link`. This ensures proper styling and spacing between elements.
     *
     * ```tsx
     * <Toast.Body>
     *  <Toast.Message>Your workbook was successfully processed.</Toast.Message>
     *  <Toast.Link href="#hreflink">Custom Link</Toast.Link>
     * </Toast.Body>
     * ```
     */
    Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ToastBody").ToastBodyProps>;
    /**
     * `Toast.CloseIcon` renders a {@link PopupCloseIcon}. You can pass an `onClick` when used with `Popper` to dismiss the `Toast`.
     */
    CloseIcon: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./ToastCloseIcon").ToastCloseIconProps>;
    /**
     * `ToastIcon` renders a `SystemIcon` where you have access to all styling properties from `SystemIcon`.
     */
    Icon: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ToastIcon").ToastIconProps>;
    /**
     * `Toast.Message` renders our `Subtext` component where you can style however way you'd like with style properties.
     * This component also has an `id` so that when the `Toast` has a prop of `mode="dialog"` the message is read out by screen readers by adding an `aria-describedby` on the main `Toast` component.
     */
    Message: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("./ToastMessage").ToastMessageProps, {
        state: {
            id: string;
            mode: import("./hooks/useToastModel").AriaRoleMode;
        };
        events: {};
    }>;
    /**
     * `Toast.Link` renders our `Hyperlink` component. If you need to link to more information, use this component.
     */
    Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("./ToastLink").ToastLinkProps>;
};
//# sourceMappingURL=Toast.d.ts.map