import { ComponentPropsWithoutRef } from 'react';
import { IconProps } from '../Icon';
import { ButtonAppearance, LayoutUtilProps, Size } from '../../types/props';
/**
 * Props for the Button component
 * @extends Omit<ComponentPropsWithoutRef<"button">, "children">
 * @extends LayoutUtilProps
 */
export type ButtonProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & LayoutUtilProps & {
    /**
     * The visual variant of the button.
     * @default secondary
     */
    appearance?: ButtonAppearance;
    /**
     * The size of the button.
     * @default medium
     */
    size?: Extract<Size, "small" | "medium" | "large">;
    /**
     * The loading state of the button.
     * If true, it will show infinite state of the loading.
     * @default false
     */
    loading?: boolean;
} & ({
    children?: ComponentPropsWithoutRef<"button">["children"];
    /**
     * The icons of the button.
     */
    icon?: IconProps["svg"] | {
        after: IconProps["svg"];
    } | {
        before: IconProps["svg"];
    };
} | {
    children?: never;
    /**
     * The icon of the icon only button.
     */
    icon?: IconProps["svg"];
});
/**
 * Button component for triggering actions and user interactions.
 *
 * Features:
 * - Multiple visual appearances (primary, secondary, ghost, danger variants)
 * - Three size options (small, medium, large)
 * - Loading state with spinner animation
 * - Icon support (before, after, or icon-only)
 * - Full accessibility support with ARIA attributes
 * - Supports layout utilities for positioning and spacing
 * - Automatic disabled state when loading
 * - Flexible content with text and/or icons
 *
 * @example
 * <Button appearance="primary" size="medium" onClick={() => console.log('clicked')}>
 *   Click Me
 * </Button>
 */
export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;