# thinkrank/1.0.0/src/admin/components/common/OptimizationButton.js

ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO, version 1.0.0. 118 lines.

- Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/common/OptimizationButton.js
- Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/admin/components/common/OptimizationButton.js
- Modified: 2025-08-10T07:57:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/common/OptimizationButton.js#L10-L20`.

```javascript
/**
 * OptimizationButton Component
 * 
 * Standardized optimization button component extracted from Site Identity patterns.
 * Supports different optimization types (AI, rule-based, validation, testing, generation)
 * with consistent styling and behavior across all Essential SEO tabs.
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * OptimizationButton Component
 * 
 * @param {Object} props Component props
 * @param {string} props.type Button type: 'ai', 'rule', 'validate', 'test', 'generate'
 * @param {Function} props.onClick Click handler function
 * @param {boolean} props.isBusy Loading/busy state
 * @param {boolean} props.disabled Disabled state
 * @param {string} props.label Custom button label (overrides default)
 * @param {string} props.loadingLabel Custom loading label (overrides default)
 * @param {string} props.size Button size: 'small', 'default', 'large'
 * @param {string} props.className Additional CSS classes
 * @param {Object} props.rest Additional props passed to Button component
 */
const OptimizationButton = ({ 
    type = 'rule', 
    onClick, 
    isBusy = false, 
    disabled = false, 
    label, 
    loadingLabel,
    size = 'default',
    className = '',
    ...rest 
}) => {
    /**
     * Get button configuration based on type
     * Extracted from Site Identity getOptimizationButtonConfig pattern
     */
    const getButtonConfig = () => {
        const configs = {
            ai: {
                variant: 'secondary',
                defaultLabel: __('AI Optimize', 'thinkrank'),
                defaultLoadingLabel: __('AI Optimizing...', 'thinkrank'),
                className: 'thinkrank-btn-ai'
            },
            rule: {
                variant: 'secondary', 
                defaultLabel: __('Optimize', 'thinkrank'),
                defaultLoadingLabel: __('Optimizing...', 'thinkrank'),
                className: 'thinkrank-btn-rule'
            },
            validate: {
                variant: 'secondary',
                defaultLabel: __('Validate', 'thinkrank'),
                defaultLoadingLabel: __('Validating...', 'thinkrank'),
                className: 'thinkrank-btn-validate'
            },
            test: {
                variant: 'secondary',
                defaultLabel: __('Test Connection', 'thinkrank'),
                defaultLoadingLabel: __('Testing...', 'thinkrank'),
                className: 'thinkrank-btn-test'
            },
            generate: {
                variant: 'secondary',
                defaultLabel: __('Generate', 'thinkrank'),
                defaultLoadingLabel: __('Generating...', 'thinkrank'),
                className: 'thinkrank-btn-generate'
            }
        };
        
        return configs[type] || configs.rule;
    };

    const config = getButtonConfig();
    
    // Combine CSS classes following Site Identity pattern
    const buttonClasses = [
        config.className,
        className
    ].filter(Boolean).join(' ');

    /**
     * Handle click event with loading state protection
     * Following Site Identity onClick pattern
     */
    const handleClick = (event) => {
        if (!isBusy && !disabled && onClick) {
            onClick(event);
        }
    };

    return (
        <Button
            variant={config.variant}
            onClick={handleClick}
            isBusy={isBusy}
            disabled={disabled || isBusy}
            size={size}
            className={buttonClasses}
            {...rest}
        >
            {isBusy 
                ? (loadingLabel || config.defaultLoadingLabel)
                : (label || config.defaultLabel)
            }
        </Button>
    );
};

export default OptimizationButton;

```