import { MouseEventHandler } from 'react';
import { FlexboxProps, SpaceProps, TypographyProps } from 'styled-system';
import { ColorVariant, VariantType } from '../../theme.js';
import { NewColorProps as ColorProps } from '../../utils/color-props.js';
/**
 * @load ./button-props.doc.md
 * @memberof Button
 * @alias ButtonProps
 * @property {string} [...] Other props from {@link ColorProps}, {@link SpaceProps}
 *                          and {@link TypographyProps}
 */
export type ButtonProps = ColorProps & SpaceProps & TypographyProps & FlexboxProps & {
    /**
     * Button variant
     * @default 'contained'
     */
    variant?: 'contained' | 'outlined' | 'text' | VariantType;
    /**
     * Button color variant
     * @default 'primary'
     */
    color?: ColorVariant;
    /**
     * Button size variant
     */
    size?: 'sm' | 'lg' | 'icon' | 'default' | 'md';
    /**
     * If button should be rounded
     * @default false
     */
    rounded?: boolean;
    /**
     * You can either pass an label prop - or use react Children.
     */
    label?: string;
} & {
    onClick?: MouseEventHandler<HTMLButtonElement>;
};