import type React from 'react';
import type { ClickDetail } from './types.js';
/**
 * @csspart base
 */
export interface ButtonOwnProps {
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label?: string;
    /**
     * Visual style variant. Allowed values: `filled`, `ghost`, `outline`, `underline`, `side-indicator`.
     * @example 'filled'
     */
    variant?: 'filled' | 'ghost' | 'outline' | 'underline' | 'side-indicator';
    /**
     * Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`.
     * @example 'neutral'
     */
    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
    /**
     * Corner radius style. Allowed values: `sharp`, `rounded`, `pill`.
     * @example 'sharp'
     */
    shape?: 'sharp' | 'rounded' | 'pill';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Disables the component, preventing interaction.
     * @defaultValue false
     * @example true
     */
    disabled?: boolean;
    /**
     * Icon displayed before the label text.
     * @example 'example'
     */
    iconLeading?: string;
    /**
     * Icon displayed after the label text.
     * @example 'example'
     */
    iconTrailing?: string;
    /**
     * Icon-only mode — renders a square button with the icon and an accessible aria-label.
     * @example 'trash'
     */
    iconOnly?: string;
    /**
     * Accessible label for screen readers when no visible label is present.
     * @example 'Delete item'
     */
    ariaLabel?: string;
    /**
     * Semantic HTML element: 'button' (default), 'submit', 'reset', or 'link'. Allowed values: `button`, `submit`, `toggle`, `link`.
     * @example 'button'
     */
    kind?: 'button' | 'submit' | 'toggle' | 'link';
    /**
     * Tri-state toggle pressed state (true/false/'mixed'). Adds aria-pressed.
     * @defaultValue false
     * @example true
     */
    pressed?: boolean;
    /**
     * URL for link-mode buttons (kind='link'). Renders an <a> element.
     * @example '/example'
     */
    href?: string;
    /**
     * Fires when the user activates the component. Detail: `ClickDetail`.
     * @example (event) => console.log(event.detail)
     */
    onClick?: (event: CustomEvent<ClickDetail>) => void;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<Button>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-button>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type ButtonProps = ButtonOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof ButtonOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Button: React.ForwardRefExoticComponent<ButtonOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof ButtonOwnProps> & React.RefAttributes<HTMLElement>>;