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

Welcome to the STIHL Design System react component library.

import { HTMLAttributes, JSX } from 'react';
import { BannerVariant } from './Banner.utils';
export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
    /** Content of the Banner. */
    children?: React.ReactNode;
    /** Close button props:
     *
     * `data-*`: Custom data attributes.
     *
     * `label`: Accessibility label for the close button.
     * (default) 'Close banner'
     */
    closeButtonProps?: {
        [key: `data-${string}`]: string | undefined;
        label?: string;
    };
    /** Defines the variant.
     * @default 'default'
     */
    variant?: BannerVariant;
    /** Shows a close button if provided and is called when the close button is clicked. */
    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}
/**
 * Use the Banner component to highlight temporary, non-critical marketing content—such as promotions, campaigns,
 * or events—without disrupting the user experience.
 *
 * Avoid using it for critical updates or system messages; use notifications for those instead.
 *
 * Design in Figma: [Button](https://www.figma.com/design/E1V1SOH56AJFI8POcjNHhO/Header-open-topics?node-id=6901-29457&t=lCfYTKhxZ4XCLjnV-4)
 * */
export declare const DSBanner: ({ className, closeButtonProps, children, variant, onClose, ...rest }: BannerProps) => JSX.Element;