import React from 'react';
import type { ComponentPropsWithoutRef } from 'react';
import type { IconName } from '../../tokens/icons';
import type { ColorVariant } from '../../tokens/colors';
export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'color'> {
    /**
     * Visual variant of the button.
     * @default 'primary'
     */
    variant?: ButtonVariant;
    /**
     * Semantic color of the button (uses brand colors from ThemeProvider).
     * @default 'primary'
     */
    color?: ColorVariant;
    /**
     * Icon to display before the button text.
     */
    leftIcon?: IconName;
    /**
     * Icon to display after the button text.
     */
    rightIcon?: IconName;
    /**
     * Render as icon-only button (circular, 44x44).
     * When set, children are ignored and aria-label is required.
     */
    iconOnly?: IconName;
    /**
     * Disabled state - prevents interaction.
     * @default false
     */
    disabled?: boolean;
}
/**
 * A versatile, accessible button component optimized for ChatGPT app interfaces.
 *
 * **Features:**
 * - Four variants: primary (filled), secondary (outlined), tertiary (subtle), ghost (minimal)
 * - 44px pill-shaped design for optimal touch targets
 * - Icon support (left/right positions)
 * - Icon-only circular buttons (44×44)
 * - Full accessibility with ARIA support
 * - Interactive states (hover, active, disabled)
 * - Dark mode compatible
 *
 * **Accessibility:**
 * - Uses semantic `<button>` element
 * - Icon-only buttons require `aria-label` (development warning if missing)
 * - Proper disabled state handling
 * - Keyboard navigation support with visible focus indicators
 *
 * **When to Use Button vs Link:**
 * - Use Button for actions: submit forms, open modals, trigger interactions
 * - Use Link (anchor) for navigation: go to pages, open URLs
 *
 * @example
 * ```tsx
 * // Primary button for main actions
 * <Button variant="primary">Get Started</Button>
 *
 * // Secondary button for alternative actions
 * <Button variant="secondary">Learn More</Button>
 *
 * // Semantic color variants (uses brand colors from ThemeProvider)
 * <Button variant="primary" color="success">Save Changes</Button>
 * <Button variant="primary" color="error">Delete Account</Button>
 * <Button variant="secondary" color="warning">Reset Settings</Button>
 *
 * // With icons for visual clarity
 * <Button variant="primary" leftIcon="plus-circle-add">Add Item</Button>
 * <Button variant="primary" rightIcon="arrow-right-sm">Continue</Button>
 *
 * // Icon-only buttons (MUST have aria-label)
 * <Button variant="ghost" iconOnly="edit-pencil" aria-label="Edit document" />
 * <Button variant="tertiary" iconOnly="plus-circle-add" aria-label="Add item" />
 *
 * // Disabled state
 * <Button variant="primary" disabled>Cannot Click</Button>
 *
 * // Form submission
 * <Button variant="primary" type="submit">Submit Form</Button>
 * ```
 */
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
//# sourceMappingURL=Button.d.ts.map