@navinc/base-react-components/cjs/button.d.ts

Nav's Pattern Library

import { AnchorHTMLAttributes, ReactEventHandler, ReactNode } from 'react';
import { IconName } from './icons/index.js';
import { InferComponentProps, PolymorphicStyledComponent } from './types.js';
export declare type SizeKey = 'small' | 'medium' | 'mediumFull' | 'large' | 'largeFull' | 'extraLarge' | 'cardButton';
export declare type VariationKey = 'main' | 'outline' | 'shade' | 'white' | 'tan' | 'destructive' | 'accent' | 'buttonLink' | 'buttonLinkIcon' | 'buttonAction' | 'noOutline' | 'whiteOutline' | 'neutral';
export declare type IconPosition = 'left' | 'right';
export declare type StyledButtonProps = {
    wrap?: boolean;
    $isLoading?: boolean;
    variation?: VariationKey;
    size?: SizeKey;
    iconFilename?: IconName;
    iconPosition?: IconPosition;
};
export declare const StyledButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledButtonProps, never>;
export declare type ButtonBaseProps = {
    children?: ReactNode;
    $isLoading?: boolean;
    onClick?: ReactEventHandler;
} & InferComponentProps<typeof StyledButton>;
declare const ButtonLink: PolymorphicStyledComponent<import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledButtonProps, never>, import("styled-components").StyledComponent<{
    ({ to, href, target, onClick, className, bold, ...props }: {
        to?: import("history").LocationDescriptor<unknown> | ((location: import("history").Location<unknown>) => import("history").LocationDescriptor<unknown>) | undefined;
        href?: import("history").LocationDescriptor<unknown> | ((location: import("history").Location<unknown>) => import("history").LocationDescriptor<unknown>) | undefined;
        target?: string | undefined;
        onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
        className?: string | undefined;
        bold?: boolean | undefined;
        download?: boolean | undefined;
        rel?: string | undefined;
    } & InferComponentProps<import("styled-components").StyledComponent<({ bold, light: _light, size: _size, boldType: _boldType, ...props }: import("./text.js").TextProps) => JSX.Element, import("styled-components").DefaultTheme, {
        bold?: boolean | undefined;
        size?: "regular" | "small" | "medium" | "large" | undefined;
        boldType?: "regular" | "semiBold" | "bold" | undefined;
        $bold?: boolean | undefined;
        light?: boolean | undefined;
    } & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, never>>): JSX.Element;
    displayName: string;
}, import("styled-components").DefaultTheme, {}, never>>;
declare type ButtonLinkProps = InferComponentProps<typeof ButtonLink>;
declare const ButtonAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledButtonProps & {
    as: string;
} & import("react").ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement>, "as">;
declare type ButtonAnchorProps = InferComponentProps<typeof ButtonAnchor>;
declare type ButtonProps = {
    isLoading?: boolean;
} & (({
    href?: never;
    asAnchor?: never;
} & ButtonBaseProps) | ({
    href: ButtonAnchorProps['href'];
    asAnchor: true;
} & ButtonAnchorProps) | ({
    href: ButtonLinkProps['href'];
    asAnchor?: false;
} & ButtonLinkProps) | ({
    href: ButtonLinkProps['href'];
    asAnchor?: boolean;
} & ButtonLinkProps));
export declare const Button: {
    ({ href, asAnchor, isLoading, ...props }: ButtonProps): JSX.Element;
    displayName: string;
};
declare const StyledButtonExp: import("styled-components").StyledComponent<{
    ({ href, asAnchor, isLoading, ...props }: ButtonProps): JSX.Element;
    displayName: string;
}, import("styled-components").DefaultTheme, {}, never>;
export default StyledButtonExp;