@mantine/core/lib/components/Button/Button.d.ts

React components library focused on usability, accessibility and developer experience

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<ButtonFactory> {
    '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: (<C = "button">(props: import("../..").PolymorphicComponentProps<C, ButtonProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ButtonProps & {
    component?: any;
} & Omit<any, "component" | keyof ButtonProps> & {
    ref?: any;
    renderRoot?: (props: any) => any;
}) | (ButtonProps & {
    component: React.ElementType;
    renderRoot?: (props: Record<string, any>) => 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;
    }
}