import type { ButtonHTMLAttributes, ReactElement } from 'react';
import type { UnionToIntersection } from 'type-fest';
import type { AsChildProps } from '../utils/AsChildProps';
type ButtonVariant = 'primary' | 'primaryFaint' | 'secondary' | 'secondaryStrong' | 'secondaryFaint' | 'highContrast' | 'critical';
type ButtonSize = 'xSmall' | 'small' | 'medium' | 'large';
type ButtonPropsCommon = AsChildProps> & {
contentClassName?: string;
variant?: ButtonVariant;
size?: ButtonSize;
disabled?: ButtonHTMLAttributes['disabled'];
isTruncatable?: boolean;
};
type ButtonProps = ButtonPropsUnion & ButtonPropsCommon;
type ButtonPropsUnion = {
iconStart?: ReactElement;
} | {
iconEnd?: ReactElement;
} | {
shortcutKey?: string;
};
type ButtonPropsAll = ButtonPropsCommon & UnionToIntersection;
declare const variants: import("tailwind-variants").TVReturnType<{
variant: {
primary: string;
primaryFaint: string;
secondary: string;
secondaryStrong: string;
secondaryFaint: string;
highContrast: string;
critical: string;
};
size: {
xSmall: string;
small: string;
medium: string;
large: string;
none: string;
};
}, undefined, "group/button relative flex shrink-0 items-center rounded-2 outline outline-1 -outline-offset-1 transition-colors focus-visible:outline-1 focus-visible:ring-2 focus-visible:ring-focus disabled:cursor-not-allowed disabled:bg-surface-disabled disabled:text-text-disabled disabled:outline-border-2", {
responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
size?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
} | undefined;
} & import("tailwind-variants/dist/config.js").TWMConfig & {
twMerge: true;
twMergeConfig: {
extend: {
classGroups: {
type: {
type: string[];
}[];
'text-wrap': string[];
rounded: {
rounded: string[];
}[];
};
};
};
}, {
variant: {
primary: string;
primaryFaint: string;
secondary: string;
secondaryStrong: string;
secondaryFaint: string;
highContrast: string;
critical: string;
};
size: {
xSmall: string;
small: string;
medium: string;
large: string;
none: string;
};
}, undefined, import("tailwind-variants").TVReturnType<{
variant: {
primary: string;
primaryFaint: string;
secondary: string;
secondaryStrong: string;
secondaryFaint: string;
highContrast: string;
critical: string;
};
size: {
xSmall: string;
small: string;
medium: string;
large: string;
none: string;
};
}, undefined, "group/button relative flex shrink-0 items-center rounded-2 outline outline-1 -outline-offset-1 transition-colors focus-visible:outline-1 focus-visible:ring-2 focus-visible:ring-focus disabled:cursor-not-allowed disabled:bg-surface-disabled disabled:text-text-disabled disabled:outline-border-2", import("tailwind-variants/dist/config.js").TVConfig<{
variant: {
primary: string;
primaryFaint: string;
secondary: string;
secondaryStrong: string;
secondaryFaint: string;
highContrast: string;
critical: string;
};
size: {
xSmall: string;
small: string;
medium: string;
large: string;
none: string;
};
}, {
variant: {
primary: string;
primaryFaint: string;
secondary: string;
secondaryStrong: string;
secondaryFaint: string;
highContrast: string;
critical: string;
};
size: {
xSmall: string;
small: string;
medium: string;
large: string;
none: string;
};
}>, unknown, unknown, undefined>>;
/**
* Button component
*/
declare const Button: import("react").MemoExoticComponent>>;
export type { ButtonProps, ButtonPropsAll, ButtonPropsCommon, ButtonPropsUnion };
export { Button, variants as buttonVariants };