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

Nav's Pattern Library

import { AnchorHTMLAttributes, DetailedHTMLProps, ReactEventHandler, ReactNode } from 'react';
import { IconName } from './icons/index.js';
import { InferComponentProps } from './types.js';
export type SizeKey = 'small' | 'medium' | 'mediumFull' | 'large' | 'largeFull' | 'extraLarge' | 'cardButton';
export type VariationKey = 'main' | 'outline' | 'shade' | 'white' | 'tan' | 'destructive' | 'accent' | 'buttonLink' | 'buttonLinkIcon' | 'buttonAction' | 'noOutline' | 'whiteOutline' | 'neutral';
export type IconPosition = 'left' | 'right';
export type StyledButtonProps = {
    wrap?: boolean;
    $isLoading?: boolean;
    variation?: VariationKey;
    size?: SizeKey;
    iconFilename?: IconName;
    iconPosition?: IconPosition;
};
export declare const StyledButton: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string;
export type ButtonBaseProps = {
    children?: ReactNode;
    $isLoading?: boolean;
    onClick?: ReactEventHandler;
} & InferComponentProps<typeof StyledButton>;
declare const ButtonLink: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("styled-components").FastOmit<{
    to?: string | import("react-router-dom").To;
    href?: string | import("react-router-dom").To;
    target?: string;
    onClick?: import("react").MouseEventHandler<HTMLAnchorElement>;
    className?: string;
    bold?: boolean;
    download?: boolean;
    rel?: string;
} & InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<{
    bold?: boolean;
    size?: "small" | "medium" | "large" | "regular";
    boldType?: "bold" | "regular" | "semiBold";
    $bold?: boolean;
    light?: boolean;
} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, "bold" | "light" | "size" | keyof import("react").ClassAttributes<HTMLSpanElement> | keyof import("react").HTMLAttributes<HTMLSpanElement> | "boldType" | "$bold"> & {
    bold?: boolean;
    size?: "small" | "medium" | "large" | "regular";
    boldType?: "bold" | "regular" | "semiBold";
    $bold?: boolean;
    light?: boolean;
} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, never>> & string>, never>, StyledButtonProps>> & string;
type ButtonLinkProps = InferComponentProps<typeof ButtonLink>;
declare const ButtonAnchor: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types.js").Substitute<import("styled-components").FastOmit<DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledButtonProps> & StyledButtonProps, DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>, never>, DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>> & string;
type ButtonAnchorProps = InferComponentProps<typeof ButtonAnchor>;
/**
 * @deprecated use the wayfinder button instead

Don't give it the `size` prop to default to a medium button.

Buttons copy should not wrap, but if in the rare case you need it to, first try
to get the copy shortened and if that is not a possibility, add the prop `wrap`

If you give the `Button` component an href it will change the tag to an `<a>`
tag.

If you give the button a truthy isLoading property, then it will show loading dots

TODO: Add some standardized onClick tracking?

 **/
export declare const Button: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
    children?: ReactNode;
    $isLoading?: boolean;
    onClick?: ReactEventHandler;
} & InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string> & Pick<ButtonAnchorProps, "target" | "href" | "rel"> & Pick<ButtonLinkProps, "href"> & {
    isLoading?: boolean;
    asAnchor?: boolean;
} & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<{
    children?: ReactNode;
    $isLoading?: boolean;
    onClick?: ReactEventHandler;
} & InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string> & Pick<ButtonAnchorProps, "target" | "href" | "rel"> & Pick<ButtonLinkProps, "href"> & {
    isLoading?: boolean;
    asAnchor?: boolean;
} & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
export {};