import { ButtonHTMLAttributes } from 'react'; import { BreakpointCustomizable, IconName, SelectedAriaAttributes, Theme } from '../../types'; import { IconProps } from '../Icon/Icon'; import { ButtonAriaAttribute, ButtonSize, ButtonVariant } from './Button.utils'; export interface ButtonProps extends ButtonHTMLAttributes { /** Content within the button. */ children: React.ReactNode; /** ARIA attributes to enhance accessibility * `{'aria-label'?: string;` * `'aria-expanded'?: boolean | 'true' | 'false';` * `'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';` * `'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';}` * */ aria?: SelectedAriaAttributes; /** Custom data attributes. */ [key: `data-${string}`]: string | undefined; /** Disables the button, preventing user interaction. * @default false */ disabled?: boolean; /** Hides the button label, can be responsive. * `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }` * @default false */ hideLabel?: BreakpointCustomizable; /** Name of the icon to display. */ iconName?: IconName; /** Position of the icon. * @default 'left' */ iconPosition?: 'left' | 'right'; /** URL or path for a custom icon. */ iconSource?: IconProps['source']; /** Aligns `variant='ghost'` with text. * @default false */ isFlush?: boolean; /** Shows loading indicator. * @default false */ loading?: boolean; /** Size of the button. * @default 'medium' */ size?: ButtonSize; /** Stretches the button over the parent's width. * `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }` * @default false */ stretched?: BreakpointCustomizable; /** Defines the theme. * @default 'light' */ theme?: Theme; /** * Tooltip content. */ tooltip?: string; /** Visual style variant of the button. * @default 'filled' */ variant?: ButtonVariant; /** Callback function called when the button is clicked. */ onClick?: (event: React.MouseEvent) => void; } /** * Use the Button component to initialize an important action or to highlight the user journey. * * Design in Figma: [Button](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-3943&t=UBsmFURFENnuYSW1-11) * */ export declare const DSButton: import('react').ForwardRefExoticComponent>;