@vertisanpro/flowbite-react/lib/src/components/Button/Button.js

Non-Official React components built for Flowbite and Tailwind CSS

import { twMerge } from '@vertisanpro/tailwind-merge';
import React from 'react';
import genericForwardRef from '../../helpers/generic-forward-ref';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
import { Spinner } from '../Spinner';
import { ButtonBase } from './ButtonBase';
import { ButtonGroup } from './ButtonGroup';
const ButtonComponentFn = ({ children, className, color = 'info', disabled, fullSized, isProcessing = false, processingLabel = 'Loading...', processingSpinner, gradientDuoTone, gradientMonochrome, label, outline = false, pill = false, positionInGroup = 'none', size = 'md', theme: customTheme = {}, ...props }, ref) => {
    const { buttonGroup: groupTheme, button: buttonTheme } = getTheme();
    const theme = mergeDeep(buttonTheme, customTheme);
    const theirProps = props;
    return (React.createElement(ButtonBase, { ref: ref, disabled: disabled, className: twMerge(theme.base, disabled && theme.disabled, !gradientDuoTone && !gradientMonochrome && theme.color[color], gradientDuoTone && !gradientMonochrome && theme.gradientDuoTone[gradientDuoTone], !gradientDuoTone && gradientMonochrome && theme.gradient[gradientMonochrome], outline && (theme.outline.color[color] ?? theme.outline.color.default), theme.pill[pill ? 'on' : 'off'], fullSized && theme.fullSized, groupTheme.position[positionInGroup], className), ...theirProps },
        React.createElement("span", { className: twMerge(theme.inner.base, theme.outline[outline ? 'on' : 'off'], theme.outline.pill[outline && pill ? 'on' : 'off'], theme.size[size], outline && !theme.outline.color[color] && theme.inner.outline, isProcessing && theme.isProcessing, isProcessing && theme.inner.isProcessingPadding[size], theme.inner.position[positionInGroup]) },
            React.createElement(React.Fragment, null,
                isProcessing && (React.createElement("span", { className: twMerge(theme.spinnerSlot, theme.spinnerLeftPosition[size]) }, processingSpinner || React.createElement(Spinner, { size: size }))),
                typeof children !== 'undefined' ? (children) : (React.createElement("span", { "data-testid": "flowbite-button-label", className: twMerge(theme.label) }, isProcessing ? processingLabel : label))))));
};
ButtonComponentFn.displayName = 'Button';
const ButtonComponent = genericForwardRef(ButtonComponentFn);
export const Button = Object.assign(ButtonComponent, {
    Group: ButtonGroup,
});