import React from 'react';
/**
 * Visual variants for button styling
 */
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger';
/**
 * Size options for button dimensions
 */
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
/**
 * Props for the Button component
 */
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /**
     * Visual variant of the button
     * - 'primary': Main action button with primary brand color
     * - 'secondary': Secondary action with muted styling
     * - 'ghost': Transparent button with minimal styling
     * - 'outline': Button with border and no background
     * - 'danger': Destructive action button (red)
     * @default 'primary'
     */
    variant?: ButtonVariant;
    /**
     * Size of the button
     * - 'xs': Extra small (px-2 py-1 text-xs)
     * - 'sm': Small (px-3 py-1.5 text-sm)
     * - 'md': Medium (px-4 py-2 text-sm) - default
     * - 'lg': Large (px-6 py-3 text-base)
     * - 'xl': Extra large (px-8 py-4 text-lg)
     * @default 'md'
     */
    size?: ButtonSize;
    /**
     * Button content - text, icons, or other React elements
     */
    children: React.ReactNode;
    /**
     * Additional CSS classes to apply to the button
     */
    className?: string;
    /**
     * Loading state - shows spinner and disables interaction
     * @default false
     */
    loading?: boolean;
    /**
     * Icon to display before the button text
     */
    leftIcon?: React.ReactNode;
    /**
     * Icon to display after the button text
     */
    rightIcon?: React.ReactNode;
    /**
     * Whether the button should take full width of its container
     * @default false
     */
    fullWidth?: boolean;
    /**
     * Custom loading spinner component
     * If not provided, uses default spinner
     */
    loadingSpinner?: React.ReactNode;
}
/**
 * Button component provides a highly customizable button with multiple variants and states
 *
 * Features:
 * - Multiple visual variants (primary, secondary, ghost, outline, danger)
 * - Size variations from extra small to extra large
 * - Loading states with customizable spinners
 * - Icon support (left and right positioning)
 * - Full accessibility support with proper ARIA attributes
 * - Dark mode compatible
 * - Focus management and keyboard navigation
 * - Disabled state handling
 *
 * @example
 * // Basic usage
 * <Button>Click me</Button>
 *
 * @example
 * // Secondary variant with icon
 * <Button variant="secondary" leftIcon={<PlusIcon />}>
 *   Add Item
 * </Button>
 *
 * @example
 * // Loading state
 * <Button loading onClick={handleSubmit}>
 *   {loading ? 'Submitting...' : 'Submit'}
 * </Button>
 *
 * @example
 * // Danger variant for destructive actions
 * <Button
 *   variant="danger"
 *   size="lg"
 *   onClick={() => confirmDelete()}
 * >
 *   Delete Account
 * </Button>
 *
 * @example
 * // Full width button
 * <Button fullWidth variant="primary">
 *   Continue
 * </Button>
 */
export declare const Button: ({ variant, size, children, className, loading, leftIcon, rightIcon, fullWidth, loadingSpinner, disabled, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
export {};