@retailmenot/anchor/ts/Button/Button.component.d.ts

A React UI Library by RetailMeNot

import * as React from 'react';
import { FlattenSimpleInterpolation } from '@xstyled/styled-components';
import { SpaceProps } from '@xstyled/system';
import { Theme } from './utils';
declare type Variant = 'filled' | 'outline' | 'minimal';
declare type ButtonSize = 'lg' | 'md' | 'sm' | 'xs' | string;
export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement>, SpaceProps {
    children?: any;
    disabled?: boolean;
    revealed?: boolean;
    showSpinner?: boolean;
    className?: string;
    flip?: boolean;
    colorTheme?: Theme;
    minWidth?: string;
    block?: boolean;
    circular?: boolean;
    reverse?: boolean;
    prefix?: any;
    suffix?: any;
    forceHover?: boolean;
    forceFocus?: boolean;
    forceActive?: boolean;
    onClick?: () => void;
    variant?: Variant;
    size?: ButtonSize;
}
export interface StyledButtonProps extends ButtonProps {
    iconOnly?: boolean;
    borderRadius: string;
    buttonStyles: ButtonStyles;
    $height: number;
    $size: ButtonSize;
    $fontSize?: string | number;
    colorTheme: Theme;
    variant: Variant;
}
export declare const BUTTON_KEY = "buttons";
export declare const BUTTON_THEME: {
    sizes: {
        xs: {
            minWidth: number;
            height: number;
            padding: number;
            circularPadding: number;
            fontSize: number;
            affixSpacing: number;
        };
        sm: {
            minWidth: number;
            height: number;
            padding: number;
            circularPadding: number;
            fontSize: number;
            affixSpacing: number;
        };
        md: {
            minWidth: number;
            height: number;
            padding: number;
            circularPadding: number;
            fontSize: number;
            affixSpacing: number;
        };
        lg: {
            minWidth: number;
            height: number;
            padding: number;
            circularPadding: number;
            fontSize: number;
            affixSpacing: number;
        };
    };
    variants: {
        filled: {
            base: ({ reverse, colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation;
            disabled: ({ reverse, colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation;
            hover: ({ reverse, colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation;
            active: ({ reverse }: StyledButtonProps) => FlattenSimpleInterpolation | undefined;
            focus: ({ reverse }: StyledButtonProps) => FlattenSimpleInterpolation | undefined;
            focusOutline: ({ reverse, colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation;
        };
        outline: {
            base: ({ colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation;
            disabled: ({ reverse, colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation;
            hover: ({ reverse, colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation;
            focusOutline: ({ reverse, colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation;
        };
        minimal: {
            base: ({ colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation;
            disabled: ({ reverse }: StyledButtonProps) => FlattenSimpleInterpolation;
            hover: ({ reverse, colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation;
            active: ({ reverse, colorTheme }: StyledButtonProps) => FlattenSimpleInterpolation | undefined;
            focusOutline: ({ reverse }: StyledButtonProps) => FlattenSimpleInterpolation;
        };
    };
};
declare type ButtonStyle = ((args: StyledButtonProps) => FlattenSimpleInterpolation | undefined) | FlattenSimpleInterpolation;
interface ButtonStyles {
    base: ButtonStyle;
    disabled: ButtonStyle;
    hover: ButtonStyle;
    active?: ButtonStyle;
    focus?: ButtonStyle;
    focusOutline?: ButtonStyle;
}
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<any>>;
export {};