import { IconName } from '../SvgProvider.jsx';

export type AlertProps = {
    /**
     * Content to render within the element.
     */
    children?: React.ReactNode | undefined;
    /**
     * A class property to attach to the element.
     *
     * @see {@link !Element.className}
     */
    className?: string | undefined;
    /**
     * The name of an icon to render on the left side of the alert content.
     *
     * When not specified, an icon will be displayed that matches the specified `type`.
     */
    icon?: IconName | undefined;
    /**
     * An identifier to attach to the element.
     *
     * @see {@link !Element.id}
     */
    id?: string | undefined;
    /**
     * A callback invoked when a user clicks the alert's close button. (The close button is rendered
     * only when an `onClose` callback is specified.)
     */
    onClose?: (() => void) | undefined;
    title?: string | undefined;
    /**
     * The type of alert to show to the user.
     *
     * @default info
     */
    type?: "error" | "info" | "success" | "warn";
};
/**
 * An `Alert` calls a user's attention to important information. It can be used to call out helpful
 * information, warn users, or report an error.
 *
 * ![Alert info variant](./screenshots/alert_info.png)
 * ![Alert warn variant](./screenshots/alert_warn.png)
 * ![Alert error variant](./screenshots/alert_error.png)
 *
 * @param props
 * @example
 * ```tsx
 * import { Alert } from "@netlify/sdk/ui/react/components";
 *
 * <Alert type="info">I contain an error.</Alert>
 * <Alert type="warn">I contain a warning.</Alert>
 * <Alert type="error">I contain an error.</Alert>
 * ```
 */
export declare const Alert: ({ type, children, onClose, icon, ...otherProps }: AlertProps) => import("react").JSX.Element;
//# sourceMappingURL=Alert.d.ts.map