@kaspersky/components/src/button/types.d.ts

Kaspersky Design System UI Kit

import { ButtonGroupProps as AntdButtonGroupProps } from 'antd/es/button';
import { ButtonHTMLType } from 'antd/es/button/button';
import { MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
import { TextSizes } from '../../design-system/tokens/index.js';
import { Size, Theme } from '../../design-system/types/index.js';
import { Focus } from '../../design-system/tokens/focus.js';
import { TestingProps, ToViewProps } from '../../helpers/typesHelpers.js';
export declare type ButtonToViewProps<T> = ToViewProps<T, ButtonCssConfig, BaseThemedButtonProps>;
/**
 * Modes
*/
/** @deprecated  */
export declare type ButtonModeDeprecated = 'primaryBlue' | 'danger' | 'primaryBlack' | 'invertedPrimary' | 'invertedSecondary' | 'invertedTertiary';
export declare type ButtonModeActual = 'primary' | 'secondary' | 'tertiary' | 'dangerFilled' | 'dangerOutlined';
export declare type ButtonMode = ButtonModeActual | ButtonModeDeprecated;
/**
 * Sizes
*/
export declare type ButtonSize = `${Exclude<Size, Size.ExtraSmall>}`;
export declare type ButtonSizeConfig = TextSizes & {
    padding: string;
    height: string;
    borderRadius: string;
    minWidth: string;
};
/**
 * Colors
*/
declare type StateProps = {
    background?: string;
    color?: string;
    border?: string;
};
export declare type ButtonColorConfig = Focus & {
    normal?: StateProps;
    hover?: StateProps;
    active?: StateProps;
    disabled?: StateProps;
};
export declare type ButtonCssConfig = ButtonColorConfig & ButtonSizeConfig;
/**
 * Props
*/
export declare type BaseThemedButtonProps = {
    /** Size */
    size?: ButtonSize;
    /** Custom theme */
    theme?: Theme;
    /** Color mode */
    mode?: ButtonMode;
};
export declare type ButtonProps = PropsWithChildren<BaseThemedButtonProps & {
    /** Disabled state */
    disabled?: boolean;
    /** Loading state */
    loading?: boolean;
    /** Css class */
    className?: string;
    /** Icon before text */
    iconBefore?: ReactNode;
    /** Icon after text */
    iconAfter?: ReactNode;
    /** On click handler */
    onClick?: MouseEventHandler<HTMLElement>;
    /** Text */
    text?: string;
    /** HTML attribute 'type' */
    type?: ButtonHTMLType;
    /** Display in :active state */
    isPressed?: boolean;
    /** @deprecated Use 'iconBefore' prop instead */
    icon?: ReactNode;
}> & TestingProps;
export declare type ButtonViewProps = ButtonToViewProps<ButtonProps>;
export declare type ButtonGroupProps = PropsWithChildren<AntdButtonGroupProps> & TestingProps;
/** @deprecated Use ButtonProps instead */
export declare type IButtonProps = ButtonProps;
/** @deprecated Use ButtonViewProps instead */
export declare type IButtonViewProps = ButtonViewProps;
/** @deprecated Use ButtonGroupProps instead */
export declare type IButtonGroupProps = ButtonGroupProps;
export {};