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

Welcome to the STIHL Design System react component library.

import { HTMLAttributes, JSX } from 'react';
import { NotificationVariant } from './Notification.utils';
export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
    /** Content within the Notification. */
    children: React.ReactNode;
    /** 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;
    };
    /** Content within the Notification's action bar. For example a CTA button. */
    customActionArea?: React.ReactNode;
    /** Hides the icon.
     * @default false
     */
    hideIcon?: boolean;
    /** Defines the variant.
     * @default 'info'
     */
    variant?: NotificationVariant;
    /** Shows a close button if provided and is called when the close button is clicked. */
    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}
/**
 * An inline notification component that can be used to provide system feedback messages
 * or highlight important content.
 *
 * Design in Figma: [Notification](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=7251-8)
 *
 * The background color and icon vary based on the value of the `variant` prop.
 *
 * <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 DSNotification: ({ children, variant, className, closeButtonProps, customActionArea, hideIcon, onClose, ...rest }: NotificationProps) => JSX.Element;