@nex-ui/react/dist/types/theme/recipes/button.d.ts

🎉 A beautiful, modern, and reliable React component library.

import * as _nex_ui_system from '@nex-ui/system';
import { RecipeVariants } from '@nex-ui/system';

declare const buttonRecipe: _nex_ui_system.SlotRecipeRuntimeFn<{
    root: {
        position: "relative";
        transition: "colors";
        lineHeight: "base";
        overflow: "hidden";
        display: "inline-flex";
        alignItems: "center";
        justifyContent: "center";
        _focusVisibleRing: {
            outline: string;
            outlineOffset: string;
        };
    };
    startIcon: {
        display: "inherit";
        ml: "-1";
        mr: "2";
        '& svg': {
            fs: string;
        };
    };
    endIcon: {
        display: "inherit";
        ml: "2";
        mr: "-1";
        '& svg': {
            fs: string;
        };
    };
}, {
    variant: {
        outlined: {
            root: {
                bg: "transparent";
                border: "md";
                borderColor: {
                    _DEFAULT: "colorPalette.primary";
                    _hover: "colorPalette.secondary";
                    _expanded: "colorPalette.secondary";
                };
                color: {
                    _DEFAULT: "colorPalette.primary";
                    _hover: "colorPalette.secondary";
                    _expanded: "colorPalette.secondary";
                };
            };
        };
        solid: {
            root: {
                bg: {
                    _DEFAULT: "colorPalette.primary";
                    _hover: "colorPalette.secondary";
                    _expanded: "colorPalette.secondary";
                };
                color: "colorPalette.contrastText";
            };
        };
        ghost: {
            root: {
                color: "colorPalette.500";
                bg: {
                    _DEFAULT: "transparent";
                    _hover: "colorPalette.500/10";
                    _expanded: "colorPalette.500/10";
                };
            };
        };
        faded: {
            root: {
                bg: {
                    _DEFAULT: "colorPalette.100";
                    _hover: "colorPalette.50";
                    _expanded: "colorPalette.50";
                    _dark: {
                        _DEFAULT: "colorPalette.800/50";
                        _hover: "colorPalette.900/50";
                        _expanded: "colorPalette.900/50";
                    };
                };
                color: {
                    _DEFAULT: "colorPalette.600";
                    _dark: "colorPalette.400";
                };
            };
        };
    };
    size: {
        readonly sm: {
            root: {
                readonly px: "3";
                readonly fs: "md";
                readonly h: "8";
            };
        };
        readonly md: {
            root: {
                readonly px: "4";
                readonly fs: "lg";
                readonly h: "10";
            };
        };
        readonly lg: {
            root: {
                readonly px: "5";
                readonly fs: "xl";
                readonly h: "12";
            };
        };
    };
    disabled: {
        readonly true: {
            root: {
                readonly opacity: 0.6;
                readonly pointerEvents: "none";
            };
        };
    };
    loading: {
        readonly true: {
            root: {
                readonly opacity: 0.6;
                readonly pointerEvents: "none";
            };
        };
    };
    fullWidth: {
        readonly true: {
            root: {
                readonly w: "100%";
            };
        };
    };
    radius: {
        readonly sm: {
            root: {
                readonly borderRadius: "md";
            };
        };
        readonly md: {
            root: {
                readonly borderRadius: "lg";
            };
        };
        readonly lg: {
            root: {
                readonly borderRadius: "xl";
            };
        };
        readonly full: {
            root: {
                readonly borderRadius: "full";
            };
        };
        readonly none: {
            root: {
                readonly borderRadius: "none";
            };
        };
    };
    iconOnly: {
        true: {
            root: {
                px: "0.5";
            };
        };
    };
    color: {
        readonly blue: {
            root: {
                readonly colorPalette: "blue";
            };
        };
        readonly gray: {
            root: {
                readonly colorPalette: "gray";
            };
        };
        readonly pink: {
            root: {
                readonly colorPalette: "pink";
            };
        };
        readonly purple: {
            root: {
                readonly colorPalette: "purple";
            };
        };
        readonly cyan: {
            root: {
                readonly colorPalette: "cyan";
            };
        };
        readonly orange: {
            root: {
                readonly colorPalette: "orange";
            };
        };
        readonly yellow: {
            root: {
                readonly colorPalette: "yellow";
            };
        };
        readonly green: {
            root: {
                readonly colorPalette: "green";
            };
        };
        readonly red: {
            root: {
                readonly colorPalette: "red";
            };
        };
    };
    rippleDisabled: {
        true: {
            root: {
                transition: "scale";
                _active: {
                    scale: string;
                };
            };
        };
    };
}>;
type ButtonRecipe = typeof buttonRecipe;
type ButtonVariants = RecipeVariants<ButtonRecipe>;

export { buttonRecipe };
export type { ButtonRecipe, ButtonVariants };