import { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core'; import { LoaderProps } from '../Loader'; import { ButtonGroup, type ButtonGroupProps, type ButtonGroupStylesNames, type ButtonGroupCssVariables, type ButtonGroupFactory } from './ButtonGroup/ButtonGroup'; import { ButtonGroupSection, type ButtonGroupSectionProps, type ButtonGroupSectionStylesNames, type ButtonGroupSectionCssVariables, type ButtonGroupSectionFactory } from './ButtonGroupSection/ButtonGroupSection'; export type ButtonSize = MantineSize | `compact-${MantineSize}` | (string & {}); export type ButtonStylesNames = 'root' | 'inner' | 'loader' | 'section' | 'label'; export type ButtonVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle' | 'default' | 'gradient'; export type ButtonCssVariables = { root: '--button-justify' | '--button-height' | '--button-padding-x' | '--button-fz' | '--button-radius' | '--button-bg' | '--button-hover' | '--button-hover-color' | '--button-color' | '--button-bd'; }; export interface ButtonProps extends BoxProps, StylesApiProps { 'data-disabled'?: boolean; /** Controls button `height`, `font-size` and horizontal `padding` @default 'sm' */ size?: ButtonSize; /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */ color?: MantineColor; /** Sets `justify-content` of `inner` element, can be used to change distribution of sections and label @default 'center' */ justify?: React.CSSProperties['justifyContent']; /** Content on the left side of the button label */ leftSection?: React.ReactNode; /** Content on the right side of the button label */ rightSection?: React.ReactNode; /** Sets `width: 100%` @default false */ fullWidth?: boolean; /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */ radius?: MantineRadius; /** Gradient configuration used for `variant="gradient"` @default theme.defaultGradient */ gradient?: MantineGradient; /** Sets `disabled` attribute, applies disabled styles */ disabled?: boolean; /** Button content */ children?: React.ReactNode; /** If set, the `Loader` component is displayed over the button */ loading?: boolean; /** Props added to the `Loader` component (only visible when `loading` prop is set) */ loaderProps?: LoaderProps; /** If set, adjusts text color based on background color for `filled` variant */ autoContrast?: boolean; } export type ButtonFactory = PolymorphicFactory<{ props: ButtonProps; defaultRef: HTMLButtonElement; defaultComponent: 'button'; stylesNames: ButtonStylesNames; vars: ButtonCssVariables; variant: ButtonVariant; staticComponents: { Group: typeof ButtonGroup; GroupSection: typeof ButtonGroupSection; }; }>; export declare const Button: ((props: import("../..").PolymorphicComponentProps) => React.ReactElement) & Omit & { ref?: any; renderRoot?: (props: any) => any; }) | (ButtonProps & { component: React.ElementType; renderRoot?: (props: Record) => any; })>, never> & import("../..").ThemeExtend<{ props: ButtonProps; defaultRef: HTMLButtonElement; defaultComponent: "button"; stylesNames: ButtonStylesNames; vars: ButtonCssVariables; variant: ButtonVariant; staticComponents: { Group: typeof ButtonGroup; GroupSection: typeof ButtonGroupSection; }; }> & import("../..").ComponentClasses<{ props: ButtonProps; defaultRef: HTMLButtonElement; defaultComponent: "button"; stylesNames: ButtonStylesNames; vars: ButtonCssVariables; variant: ButtonVariant; staticComponents: { Group: typeof ButtonGroup; GroupSection: typeof ButtonGroupSection; }; }> & { varsResolver: import("../..").VarsResolver<{ props: ButtonProps; defaultRef: HTMLButtonElement; defaultComponent: "button"; stylesNames: ButtonStylesNames; vars: ButtonCssVariables; variant: ButtonVariant; staticComponents: { Group: typeof ButtonGroup; GroupSection: typeof ButtonGroupSection; }; }>; } & import("../..").PolymorphicComponentWithProps<{ props: ButtonProps; defaultRef: HTMLButtonElement; defaultComponent: "button"; stylesNames: ButtonStylesNames; vars: ButtonCssVariables; variant: ButtonVariant; staticComponents: { Group: typeof ButtonGroup; GroupSection: typeof ButtonGroupSection; }; }> & { Group: typeof ButtonGroup; GroupSection: typeof ButtonGroupSection; }; export declare namespace Button { type Props = ButtonProps; type StylesNames = ButtonStylesNames; type CssVariables = ButtonCssVariables; type Factory = ButtonFactory; type Variant = ButtonVariant; type Size = ButtonSize; namespace Group { type Props = ButtonGroupProps; type StylesNames = ButtonGroupStylesNames; type CssVariables = ButtonGroupCssVariables; type Factory = ButtonGroupFactory; } namespace GroupSection { type Props = ButtonGroupSectionProps; type StylesNames = ButtonGroupSectionStylesNames; type CssVariables = ButtonGroupSectionCssVariables; type Factory = ButtonGroupSectionFactory; } }