@carbon/react

/** * Copyright IBM Corp. 2016, 2025 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import PropTypes from 'prop-types'; import React, { type ReactNode, type MouseEvent, type ButtonHTMLAttributes, type HTMLAttributes } from 'react'; import { type ButtonProps } from '../Button'; export interface NotificationActionButtonProps extends ButtonProps<'button'> { /** * Specify the content of the notification action button. */ children?: ReactNode; /** * Specify an optional className to be applied to the notification action button */ className?: string; /** * Specify if the visual treatment of the button should be for an inline notification */ inline?: boolean; /** * Optionally specify a click handler for the notification action button. */ onClick?(): void; } export declare function NotificationActionButton({ children, className: customClassName, onClick, inline, ...rest }: NotificationActionButtonProps): import("react/jsx-runtime").JSX.Element; export declare namespace NotificationActionButton { var propTypes: { /** * Specify the content of the notification action button. */ children: PropTypes.Requireable<PropTypes.ReactNodeLike>; /** * Specify an optional className to be applied to the notification action button */ className: PropTypes.Requireable<string>; /** * Specify if the visual treatment of the button should be for an inline notification */ inline: PropTypes.Requireable<boolean>; /** * Optionally specify a click handler for the notification action button. */ onClick: PropTypes.Requireable<(...args: any[]) => any>; }; } /** * NotificationButton * ================== */ export interface NotificationButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { /** * Specify a label to be read by screen readers on the container node * 'aria-label' of the NotificationButton component. */ ['aria-label']?: string; /** * @deprecated please use `aria-label` instead. * 'aria-label' of the NotificationButton component. */ ariaLabel?: string; /** * Specify an optional icon for the Button through a string, * if provided. However, regular "close" icon is preferred. */ name?: string; /** * Specify the notification type */ notificationType?: 'toast' | 'inline' | 'actionable'; /** * A component used to render an icon. */ renderIcon?: React.ElementType; } export declare function NotificationButton({ 'aria-label': ariaLabel, ariaLabel: deprecatedAriaLabel, className, type, renderIcon: IconTag, name, notificationType, ...rest }: NotificationButtonProps): import("react/jsx-runtime").JSX.Element; export declare namespace NotificationButton { var propTypes: { /** * Specify a label to be read by screen readers on the container node */ "aria-label": PropTypes.Requireable<string>; /** * Deprecated, please use `aria-label` instead. * Specify a label to be read by screen readers on the container note. */ ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any; /** * Specify an optional className to be applied to the notification button */ className: PropTypes.Requireable<string>; /** * Specify an optional icon for the Button through a string, * if something but regular "close" icon is desirable */ name: PropTypes.Requireable<string>; /** * Specify the notification type */ notificationType: PropTypes.Requireable<string>; /** * A component used to render an icon. */ renderIcon: PropTypes.Requireable<object>; /** * Optional prop to specify the type of the Button */ type: PropTypes.Requireable<string>; }; } export interface NotificationIconProps { iconDescription: string; kind: 'error' | 'success' | 'warning' | 'warning-alt' | 'info' | 'info-square'; notificationType: 'inline' | 'toast'; } /** * ToastNotification * ================= */ export interface ToastNotificationProps extends HTMLAttributes<HTMLDivElement> { /** * Provide a description for "close" icon button that can be read by screen readers */ 'aria-label'?: string; /** * Specify the caption */ caption?: string; /** * Specify the content */ children?: ReactNode; /** * Specify an optional className to be applied to the notification box */ className?: string; /** * Specify the close button should be disabled, or not */ hideCloseButton?: boolean; /** * Specify what state the notification represents */ kind?: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt'; /** * Specify whether you are using the low contrast variant of the ToastNotification. */ lowContrast?: boolean; /** * Provide a function that is called when menu is closed */ onClose?(event: MouseEvent): boolean | void; /** * Provide a function that is called when the close button is clicked */ onCloseButtonClick?(event: MouseEvent): void; /** * By default, this value is "status". You can also provide an alternate * role if it makes sense from the accessibility-side */ role?: 'alert' | 'log' | 'status'; /** * Provide a description for "status" icon that can be read by screen readers */ statusIconDescription?: string; /** * Specify the subtitle */ subtitle?: string; /** * Specify an optional duration the notification should be closed in */ timeout?: number; /** * Specify the title */ title?: string; } export declare function ToastNotification({ ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, role, onClose, onCloseButtonClick, statusIconDescription, className, children, kind, lowContrast, hideCloseButton, timeout, title, caption, subtitle, ...rest }: ToastNotificationProps): import("react/jsx-runtime").JSX.Element | null; export declare namespace ToastNotification { var propTypes: { /** * Provide a description for "close" icon button that can be read by screen readers */ "aria-label": PropTypes.Requireable<string>; /** * Deprecated, please use `aria-label` instead. * Provide a description for "close" icon button that can be read by screen readers */ ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any; /** * Specify the caption */ caption: PropTypes.Requireable<string>; /** * Specify the content */ children: PropTypes.Requireable<PropTypes.ReactNodeLike>; /** * Specify an optional className to be applied to the notification box */ className: PropTypes.Requireable<string>; /** * Specify the close button should be disabled, or not */ hideCloseButton: PropTypes.Requireable<boolean>; /** * Specify what state the notification represents */ kind: PropTypes.Requireable<string>; /** * Specify whether you are using the low contrast variant of the ToastNotification. */ lowContrast: PropTypes.Requireable<boolean>; /** * Provide a function that is called when menu is closed */ onClose: PropTypes.Requireable<(...args: any[]) => any>; /** * Provide a function that is called when the close button is clicked */ onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>; /** * By default, this value is "status". You can also provide an alternate * role if it makes sense from the accessibility-side */ role: PropTypes.Requireable<string>; /** * Provide a description for "status" icon that can be read by screen readers */ statusIconDescription: PropTypes.Requireable<string>; /** * Specify the subtitle */ subtitle: PropTypes.Requireable<string>; /** * Specify an optional duration the notification should be closed in */ timeout: PropTypes.Requireable<number>; /** * Specify the title */ title: PropTypes.Requireable<string>; }; } /** * InlineNotification * ================== */ export interface InlineNotificationProps extends HTMLAttributes<HTMLDivElement> { /** * Provide a description for "close" icon button that can be read by screen readers */ 'aria-label'?: string; /** * Specify the content */ children?: ReactNode; /** * Specify an optional className to be applied to the notification box */ className?: string; /** * Specify the close button should be disabled, or not */ hideCloseButton?: boolean; /** * Specify what state the notification represents */ kind?: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt'; /** * Specify whether you are using the low contrast variant of the InlineNotification. */ lowContrast?: boolean; /** * Provide a function that is called when menu is closed */ onClose?(event: MouseEvent): boolean | void; /** * Provide a function that is called when the close button is clicked */ onCloseButtonClick?(event: MouseEvent): void; /** * By default, this value is "status". You can also provide an alternate * role if it makes sense from the accessibility-side. */ role?: 'alert' | 'log' | 'status'; /** * Provide a description for "status" icon that can be read by screen readers */ statusIconDescription?: string; /** * Specify the subtitle */ subtitle?: string; /** * Specify the title */ title?: string; } export declare function InlineNotification({ ['aria-label']: ariaLabel, children, title, subtitle, role, onClose, onCloseButtonClick, statusIconDescription, className, kind, lowContrast, hideCloseButton, ...rest }: InlineNotificationProps): import("react/jsx-runtime").JSX.Element | null; export declare namespace InlineNotification { var propTypes: { /** * Provide a description for "close" icon button that can be read by screen readers */ "aria-label": PropTypes.Requireable<string>; /** * Specify the content */ children: PropTypes.Requireable<PropTypes.ReactNodeLike>; /** * Specify an optional className to be applied to the notification box */ className: PropTypes.Requireable<string>; /** * Specify the close button should be disabled, or not */ hideCloseButton: PropTypes.Requireable<boolean>; /** * Specify what state the notification represents */ kind: PropTypes.Requireable<string>; /** * Specify whether you are using the low contrast variant of the InlineNotification. */ lowContrast: PropTypes.Requireable<boolean>; /** * Provide a function that is called when menu is closed */ onClose: PropTypes.Requireable<(...args: any[]) => any>; /** * Provide a function that is called when the close button is clicked */ onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>; /** * By default, this value is "status". You can also provide an alternate * role if it makes sense from the accessibility-side. */ role: PropTypes.Requireable<string>; /** * Provide a description for "status" icon that can be read by screen readers */ statusIconDescription: PropTypes.Requireable<string>; /** * Specify the subtitle */ subtitle: PropTypes.Requireable<string>; /** * Specify the title */ title: PropTypes.Requireable<string>; }; } /** * ActionableNotification * ====================== */ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivElement> { /** * Pass in the action button label that will be rendered within the ActionableNotification. */ actionButtonLabel?: string; /** * Provide a description for "close" icon button that can be read by screen readers */ 'aria-label'?: string; /** * Specify the caption */ caption?: string; /** * Specify the content */ children?: ReactNode; /** * Specify an optional className to be applied to the notification box */ className?: string; /** * Specify if pressing the escape key should close notifications */ closeOnEscape?: boolean; /** * @deprecated This prop will be removed in the next major version, v12. * Specify if focus should be moved to the component on render. To meet the spec for alertdialog, this must always be true. If you're setting this to false, explore using Callout instead. https://github.com/carbon-design-system/carbon/pull/15532 */ hasFocus?: boolean; /** * Specify the close button should be disabled, or not */ hideCloseButton?: boolean; inline?: boolean; /** * Specify what state the notification represents */ kind?: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt'; /** * Specify whether you are using the low contrast variant of the ActionableNotification. */ lowContrast?: boolean; /** * Provide a function that is called when the action is clicked */ onActionButtonClick?(): void; /** * Provide a function that is called when menu is closed. * Default behavior of hiding the notification is prevented if this function returns false. */ onClose?(event: MouseEvent): boolean | void; /** * Provide a function that is called when the close button is clicked */ onCloseButtonClick?(event: MouseEvent): void; /** * Provide an accessible role to be used. Defaults to `alertdialog`. Any other * value will disable the wrapping of focus. To remain accessible, additional * work is required. See the storybook docs for more info: * https://react.carbondesignsystem.com/?path=/docs/components-notifications-actionable--overview#using-the-role-prop */ role?: string; /** * Provide a description for "status" icon that can be read by screen readers */ statusIconDescription?: string; /** * Specify the subtitle */ subtitle?: ReactNode; /** * Specify the title */ title?: string; } export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, caption, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): import("react/jsx-runtime").JSX.Element | null; export declare namespace ActionableNotification { var propTypes: { /** * Pass in the action button label that will be rendered within the ActionableNotification. */ actionButtonLabel: PropTypes.Requireable<string>; /** * Provide a description for "close" icon button that can be read by screen readers */ "aria-label": PropTypes.Requireable<string>; /** * Deprecated, please use `aria-label` instead. * Provide a description for "close" icon button that can be read by screen readers */ ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any; /** * Specify the caption */ caption: PropTypes.Requireable<string>; /** * Specify the content */ children: PropTypes.Requireable<PropTypes.ReactNodeLike>; /** * Specify an optional className to be applied to the notification box */ className: PropTypes.Requireable<string>; /** * Specify if pressing the escape key should close notifications */ closeOnEscape: PropTypes.Requireable<boolean>; /** * Specify if focus should be moved to the component when the notification contains actions */ hasFocus: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any; /** * Specify the close button should be disabled, or not */ hideCloseButton: PropTypes.Requireable<boolean>; inline: PropTypes.Requireable<boolean>; /** * Specify what state the notification represents */ kind: PropTypes.Requireable<string>; /** * Specify whether you are using the low contrast variant of the ActionableNotification. */ lowContrast: PropTypes.Requireable<boolean>; /** * Provide a function that is called when the action is clicked */ onActionButtonClick: PropTypes.Requireable<(...args: any[]) => any>; /** * Provide a function that is called when menu is closed */ onClose: PropTypes.Requireable<(...args: any[]) => any>; /** * Provide a function that is called when the close button is clicked */ onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>; /** * Provide an accessible role to be used. Defaults to `alertdialog`. Any other * value will disable the wrapping of focus. To remain accessible, additional * work is required. See the storybook docs for more info: * https://react.carbondesignsystem.com/?path=/docs/components-notifications-actionable--overview#using-the-role-prop */ role: PropTypes.Requireable<string>; /** * Provide a description for "status" icon that can be read by screen readers */ statusIconDescription: PropTypes.Requireable<string>; /** * Specify the subtitle */ subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>; /** * Specify the title */ title: PropTypes.Requireable<string>; }; } /** * Callout * ================== */ /** * Deprecated callout kind values. * @deprecated Use NewKindProps instead. */ export type DeprecatedKindProps = 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt'; export type NewKindProps = 'warning' | 'info'; export type KindProps = DeprecatedKindProps | NewKindProps; export interface CalloutProps extends HTMLAttributes<HTMLDivElement> { /** * Pass in the action button label that will be rendered within the ActionableNotification. */ actionButtonLabel?: string; /** * Specify the content */ children?: ReactNode; /** * Specify an optional className to be applied to the notification box */ className?: string; /** * Specify what state the notification represents */ kind?: KindProps; /** * Specify whether you are using the low contrast variant of the Callout. */ lowContrast?: boolean; /** * Provide a function that is called when the action is clicked */ onActionButtonClick?(): void; /** * Provide a description for "status" icon that can be read by screen readers */ statusIconDescription?: string; /** * Specify the subtitle */ subtitle?: ReactNode; /** * Specify the title */ title?: string; /** * Specify the id for the element containing the title */ titleId?: string; } export declare function Callout({ actionButtonLabel, children, onActionButtonClick, title, titleId, subtitle, statusIconDescription, className, kind, lowContrast, ...rest }: CalloutProps): import("react/jsx-runtime").JSX.Element; export declare namespace Callout { var propTypes: { /** * Pass in the action button label that will be rendered within the ActionableNotification. */ actionButtonLabel: PropTypes.Requireable<string>; /** * Specify the content */ children: PropTypes.Requireable<PropTypes.ReactNodeLike>; /** * Specify an optional className to be applied to the notification box */ className: PropTypes.Requireable<string>; /** * Specify what state the notification represents */ kind: (props: any, propName: any, componentName: any, ...rest: any[]) => any; /** * Specify whether you are using the low contrast variant of the Callout. */ lowContrast: PropTypes.Requireable<boolean>; /** * Provide a function that is called when the action is clicked */ onActionButtonClick: PropTypes.Requireable<(...args: any[]) => any>; /** * Provide a description for "status" icon that can be read by screen readers */ statusIconDescription: PropTypes.Requireable<string>; /** * Specify the subtitle */ subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>; /** * Specify the title */ title: PropTypes.Requireable<string>; /** * Specify the id for the element containing the title */ titleId: PropTypes.Requireable<string>; }; } /** * @deprecated Use `CalloutProps` instead. */ export interface StaticNotificationProps extends CalloutProps { } export declare const StaticNotification: React.FC<StaticNotificationProps>;