wix-style-react/dist/src/Button/Button.types.d.ts

wix-style-react

import * as React from 'react';
import { OmitPolyfill, IconElement, TooltipCommonProps } from '../common';
export type ButtonWithAsProp<T> = ButtonAsButtonProps<T> | ButtonAsAnchorProps<T> | ButtonGenericProps<T> | ButtonAsComponentProps<T>;
type ButtonAsButtonProps<T> = React.ButtonHTMLAttributes<HTMLButtonElement> & T & {
    /** Renders component as any other component or a given HTML tag. */
    as?: 'button';
    /** Defines a callback function which is called every time a button is clicked. */
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
};
type ButtonAsAnchorProps<T> = React.AnchorHTMLAttributes<HTMLAnchorElement> & T & {
    as: 'a';
    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
};
type ButtonGenericProps<T> = T & {
    as: keyof OmitPolyfill<HTMLElementTagNameMap, 'a' | 'button'>;
    onClick?: React.MouseEventHandler<HTMLElement>;
    [additionalProps: string]: any;
};
type ButtonAsComponentProps<T> = T & {
    as: React.ComponentType<any>;
    onClick?: React.MouseEventHandler<HTMLElement>;
    [additionalProps: string]: any;
};
export type ButtonProps = ButtonWithAsProp<{
    /** Accepts any item as a child element. For all common cases pass a standard text string. */
    children?: React.ReactNode;
    /** Specifies a CSS class name to be appended to the component’s root element. */
    className?: string;
    /** Specifies the skin of a button. */
    skin?: ButtonSkin;
    /** Specifies the priority of a button. */
    priority?: ButtonPriority;
    /**
     * Controls the size of a button.
     * @default medium
     */
    size?: ButtonSize;
    /** Sets button width to fill a 100% of a parent container width. */
    fullWidth?: boolean;
    /** Pass an icon or a component to display at the end of a label (e.g., svg, image, etc.) */
    suffixIcon?: IconElement;
    /** Pass an icon or a component to display at the front of a label (e.g., svg, image, etc.) */
    prefixIcon?: IconElement;
    /** Specifies whether user interactions are disabled. */
    disabled?: boolean;
    /** Applies a data-hook HTML attribute that can be used in the tests. */
    dataHook?: string;
    /** Specifies whether component handles text overflow with ellipsis. If enabled, label that exceed available space will be displayed inside of a tooltip when user hover over a button. */
    ellipsis?: boolean;
    /** Specifies whether the full button label is displayed in a tooltip when label overflows available space.
     *
     * Behaviour is enabled by default. Set property value to false to show ellipsis without a tooltip. */
    showTooltip?: boolean;
    /** Allows to pass all common tooltip props. Use it to customize a tooltip created from text ellipsis.
     * @linkTypeTo components-overlays--tooltip
     */
    tooltipProps?: TooltipCommonProps;
}>;
export default class Button extends React.Component<ButtonProps> {
}
export type ButtonSkin = 'standard' | 'inverted' | 'destructive' | 'premium' | 'dark' | 'light' | 'transparent' | 'premium-light' | 'ai';
export type ButtonPriority = 'primary' | 'secondary';
export type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';
export {};
//# sourceMappingURL=Button.types.d.ts.map