@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
46 lines (45 loc) • 1.99 kB
TypeScript
import { DialogHTMLAttributes, JSX } from 'react';
export interface DialogProps extends DialogHTMLAttributes<HTMLDialogElement> {
/** Content within the Dialog. */
children: React.ReactNode;
/** Close button props:
*
* `data-*`: Custom data attributes.
*
* `label`: Accessibility label for the close button.
* (default) 'Close dialog'
*/
closeButtonProps?: {
[key: `data-${string}`]: string | undefined;
label?: string;
};
/** Disables closing the Dialog by clicking on the backdrop.
* @default false
*/
disableBackdropClose?: boolean;
/** Content within the Dialog's footer. For example a CTA button. */
footer?: React.ReactNode;
/** Content within the Dialog's header. For example a Heading. */
header?: React.ReactNode;
/**
* If `true`, hides the close button. Ensure you provide an alternative method for closing,
* such as a button in the footer or within the children components.
* @default false
*/
hideCloseButton?: boolean;
/** Determines if the Dialog is open.
* @default false
*/
isOpen?: boolean;
/** Callback function called when the Dialog is closed. */
onClose?: () => void;
}
/**
* A component that renders a modal dialog, which can be used for displaying
* important messages, forms, or confirmations.
*
* Design in Figma: [Dialog](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=14115-4051)
*
* <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 DSDialog: ({ children, className, closeButtonProps, disableBackdropClose, footer, header, hideCloseButton, isOpen, onClose, ...rest }: DialogProps) => JSX.Element;