react-vite-themes/dist/components/atoms/Button/Button.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, {} from 'react';
import { cn } from '../../../utils';
import { Icon } from '../Icon';
export const Button = ({ children, variant = '', size = 'md', colorScheme = 'solid', isLoading = false, isDisabled = false, isFullWidth = false, leftIcon, rightIcon, centerIcon, className, ...props }) => {
    const buttonClasses = cn('btn', variant && `btn--${variant}`, `btn--${size}`, `btn--${colorScheme}`, colorScheme === 'gradient' && `btn--gradient-${variant}`, isFullWidth && 'btn--full-width', isLoading && 'btn--loading', isDisabled && 'btn--disabled', className);
    const renderIcon = (icon, position) => {
        if (!icon)
            return null;
        if (typeof icon === 'string') {
            return (_jsx("span", { className: `btn__icon btn__icon--${position}`, children: _jsx(Icon, { name: icon, size: size }) }));
        }
        return (_jsx("span", { className: `btn__icon btn__icon--${position}`, children: icon }));
    };
    return (_jsxs("button", { className: buttonClasses, disabled: isDisabled || isLoading, ...props, children: [!isLoading && centerIcon ? (renderIcon(centerIcon, 'center')) : (_jsxs(_Fragment, { children: [renderIcon(leftIcon, 'left'), _jsx("span", { className: "btn__content", children: children }), renderIcon(rightIcon, 'right')] })), isLoading && _jsx("span", { className: "btn__spinner" })] }));
};