import * as React from 'react';
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
import { SystemIconProps } from '@workday/canvas-kit-react/icon';
import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
import { ButtonColors, ButtonSizes, IconPositions } from './types';
export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBehavior {
    /**
     * Override default colors of a button. The default will depend on the button type
     */
    colors?: ButtonColors;
    /**
     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
     * If no size is provided, it will default to `medium`.
     *
     * @default 'medium
     */
    size?: ButtonSizes;
    /**
     * The icon of the Button.
     * Note: Not displayed at `small` size
     */
    icon?: CanvasSystemIcon;
    /**
     * Whether the icon should received filled (colored background layer) or regular styles.
     * Corresponds to `toggled` in ToolbarIconButton
     */
    fillIcon?: boolean;
    /**
     * Button icon positions can either be `start` or `end`.
     * If no value is provided, it defaults to `start`.
     *
     * @default 'start'
     */
    iconPosition?: IconPositions;
    children?: React.ReactNode;
}
/**
 * Extends all the style properties from Box to our buttons as well as props from ButtonContainerProps.
 * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
 * Use this type to extend and customize any one off buttons that you want full control over styling.
 */
export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {
}
/**
 * The purpose of this object is for the `colors` prop - to provide backwards compatibility with how we allowed color overrides in Emotion.
 */
export declare const buttonColorPropVars: {
    default: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
    focus: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
    hover: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
    active: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
    disabled: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
};
/**
 * Base styles for Buttons.
 */
export declare const buttonStencil: import("@workday/canvas-kit-styling").Stencil<{
    /**
     * Button modifiers that will overwrite the base styles of Buttons.
     * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
     * - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
     * within a button or if there is only an icon and no text.
     */
    size: {
        large: {
            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
            height: "var(--cnvs-sys-size-lg, 3rem)";
            paddingInline: "var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem))";
            minWidth: "var(--cnvs-base-size-1300, 6.5rem)";
        };
        medium: {
            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
            paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))";
            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
            gap: "var(--cnvs-base-size-75, 0.375rem)";
            minWidth: "var(--cnvs-base-size-1100, 5.5rem)";
        };
        small: {
            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
            paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))";
            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
            minWidth: "var(--cnvs-base-size-900, 4.5rem)";
        };
        extraSmall: {
            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
            height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
            paddingInline: "var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem))";
            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
            minWidth: string;
        };
    };
    grow: {
        true: {
            width: string;
            maxWidth: string;
        };
    };
    iconPosition: {
        only: {
            padding: number;
        };
        start: {};
        end: {};
    };
}, {}, {
    background: string;
    border: string;
    boxShadowInner: string;
    boxShadowOuter: string;
    label: string;
    opacity: string;
    borderRadius: string;
}, never, never>;
/**
 * The baseLegacy button which which is the foundation of all Button variants (`PrimaryButton`,
 * `SecondaryButton`, `TertiaryButton`, `DeleteButton`, `ToolbarIconButton` and `ToolbarDropdownButton`).
 */
export declare const BaseButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ButtonContainerProps> & {
    Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("../lib/parts/ButtonLabelIcon").ButtonLabelIconProps>;
    Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("../lib/parts/ButtonLabel").ButtonLabelProps>;
};
//# sourceMappingURL=BaseButton.d.ts.map