@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
33 lines (32 loc) • 1.37 kB
TypeScript
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: [Banner](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/branch/E1V1SOH56AJFI8POcjNHhO/Web-Pattern-Library?node-id=7171-10859&t=DJuQNlSCRz2j9IRs-11)
* */
export declare const DSBanner: ({ className, closeButtonProps, children, variant, onClose, ...rest }: BannerProps) => JSX.Element;