@serendie/ui/dist/components/Button/Button.d.ts

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { default as React, ComponentProps } from 'react';
import { RecipeVariantProps } from '../../../styled-system/types';
export declare const ButtonStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
    styleType: {
        filled: {
            bg: "sd.system.color.impression.primaryContainer";
            color: "sd.system.color.impression.onPrimaryContainer";
            _enabled: {
                _hover: {
                    _after: {
                        content: "''";
                        position: "absolute";
                        inset: "0";
                        bg: "sd.system.color.interaction.hovered";
                    };
                };
                _focusVisible: {
                    outlineWidth: "sd.system.dimension.border.medium";
                    outlineStyle: "solid";
                    outlineColor: "sd.system.color.interaction.hovered";
                    _after: {
                        content: "''";
                        position: "absolute";
                        inset: "0";
                        bg: "sd.system.color.interaction.hovered";
                    };
                };
            };
            _disabled: {
                bg: "sd.system.color.interaction.disabled";
                color: "sd.system.color.interaction.disabledOnSurface";
            };
        };
        ghost: {
            color: "sd.system.color.impression.primary";
            _enabled: {
                _hover: {
                    bgColor: "sd.system.color.interaction.hoveredVariant";
                };
                _focusVisible: {
                    bgColor: "sd.system.color.interaction.hoveredVariant";
                    outlineWidth: "sd.system.dimension.border.medium";
                    outlineStyle: "solid";
                    outlineColor: "sd.system.color.component.outlineDim";
                };
            };
            _disabled: {
                color: "sd.system.color.interaction.disabledOnSurface";
            };
        };
        outlined: {
            color: string;
            outlineWidth: string;
            outlineStyle: string;
            outlineColor: string;
            _enabled: {
                _hover: {
                    bgColor: string;
                };
                _focusVisible: {
                    outlineColor: string;
                    bgColor: string;
                };
            };
            _disabled: {
                bgColor: string;
                color: string;
                outline: string;
            };
        };
        rectangle: {
            borderRadius: "sd.system.dimension.radius.medium";
            color: string;
            outlineWidth: string;
            outlineStyle: string;
            outlineColor: string;
            _enabled: {
                _hover: {
                    bgColor: string;
                };
                _focusVisible: {
                    outlineColor: string;
                    bgColor: string;
                };
            };
            _disabled: {
                bgColor: string;
                color: string;
                outline: string;
            };
        };
    };
    size: {
        medium: {
            height: number;
            px: "sd.system.dimension.spacing.extraLarge";
            py: "sd.system.dimension.spacing.small";
            textStyle: "sd.system.typography.label.large_compact";
            expanded: {
                textStyle: "sd.system.typography.label.large_expanded";
            };
        };
        small: {
            height: number;
            px: "sd.system.dimension.spacing.small";
            py: "sd.system.dimension.spacing.twoExtraSmall";
            textStyle: "sd.system.typography.label.medium_compact";
            expanded: {
                textStyle: "sd.system.typography.label.medium_expanded";
            };
        };
    };
}>;
type ExclusiveIconProps = ({
    leftIcon?: React.ReactElement;
} & {
    rightIcon?: never;
}) | ({
    leftIcon?: never;
} & {
    rightIcon?: React.ReactElement;
});
type ButtonLoadingProps = {
    isLoading?: boolean;
};
export type ButtonProps = ComponentProps<"button"> & RecipeVariantProps<typeof ButtonStyle> & ExclusiveIconProps & ButtonLoadingProps;
export declare const Button: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
    styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
    size?: "small" | "medium" | undefined;
} & {
    leftIcon?: React.ReactElement;
} & {
    rightIcon?: never;
} & ButtonLoadingProps, "ref"> | Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
    styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
    size?: "small" | "medium" | undefined;
} & {
    leftIcon?: never;
} & {
    rightIcon?: React.ReactElement;
} & ButtonLoadingProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
export {};