import React from 'react';
export type ButtonIconType = false | string | {
    icon: string;
    position?: 'left' | 'right';
    hover?: string;
    animate?: true | string;
};
export interface ButtonSizeType {
    [key: string | number]: 'large' | 'medium' | 'small';
}
export type ButtonVariantType = 'primary' | 'secondary' | 'tertiary';
export interface ButtonPropsType {
    /** The style of the button */
    variant?: ButtonVariantType;
    /** The size of the button */
    size?: 'large' | 'medium' | 'small' | ButtonSizeType;
    /** Additional styling, such as `muted` or `full-width` */
    styling?: {
        muted?: boolean;
        fullWidth?: boolean;
        showTooltip?: boolean;
    };
    /** The icon to show on the button */
    icon?: ButtonIconType;
    /** The link the button should go to */
    href?: false | string;
    /** The element the button should be rendered as */
    element?: string;
    /** The function the button should run when clicked */
    onClick?: false | ((e: React.MouseEvent<HTMLElement>) => void);
    /** An optional function to call on focus */
    onFocus?: () => void;
    /** An optional function to call on blur */
    onBlur?: () => void;
    /** An optional function to call on keydown */
    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
    /** An optional function to call on mouse over */
    onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
    /** An optional function to call on mouse out */
    onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
    /** Additional classes to add to the button */
    className?: string;
    /** `disabled` is usually true or false, but we will want nuance in some places, for example the ability
     * to run form validation when clicking a button, even though the button appears disabled.
     * The `disabled` attribute can't be set in this case, or the click functionality will never run. */
    disabled?: boolean | {
        isClickable: boolean;
    };
    /** An optional tooltip for the button. This will only apply when disabled is true */
    tooltip?: string;
    /** An optional tooltip for the button. This force showing the tooltip even if the button is not disabled */
    forceTooltip?: boolean;
    /** This is an optional way to pass in text which is only for screen readers
     * It's rendered on the page (so the page is still functional without CSS, unlike ARIA labels) but hidden
     * with CSS, for cases where the whole button should be an icon
     * (The same effect could be handled with `children` or `className`, but we can ensure consistency by using a prop.) */
    screenreaderText?: boolean | string;
    /** Text for the button */
    children?: false | string | React.ReactNode;
    /** The target, for links */
    target?: '_blank' | '_self' | '_parent' | '_top';
    /** The rel, for links */
    rel?: string;
    /** ARIA expanded (for content that hide/shows on click) */
    'aria-expanded'?: boolean;
    /** ARIA controls, if the button controls anything */
    'aria-controls'?: string;
    /** ARIA pressed, if the button is a toggle, e.g. a like button */
    'aria-pressed'?: boolean;
    /** The GTM event type */
    'data-gtm-event-type'?: string;
    /** The GTM event context */
    'data-gtm-event-context'?: string;
    /** The test ID for Jest tests */
    'data-testid'?: string;
}
declare const Button: ({ variant, size, styling, icon, href, element, onClick, className, disabled, tooltip, forceTooltip, screenreaderText, children, ...rest }: ButtonPropsType) => import("react/jsx-runtime").JSX.Element;
export default Button;
