# thinkrank/1.0.0/src/admin/components/ui/AIButton.js

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

- Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/ui/AIButton.js
- Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/admin/components/ui/AIButton.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/ui/AIButton.js#L10-L20`.

```javascript
/**
 * AI Button Component
 * 
 * Standardized button component for AI-powered features
 * Includes sparkle icon and consistent loading states
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

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

/**
 * AI Button Component
 * 
 * @param {Object} props Component props
 * @param {string} props.children Button text
 * @param {boolean} props.isLoading Loading state
 * @param {string} props.variant Button variant (primary, secondary)
 * @param {string} props.size Button size (small, medium, large)
 * @param {boolean} props.showSparkle Show sparkle icon
 * @param {string} props.className Additional CSS classes
 * @param {Function} props.onClick Click handler
 * @param {boolean} props.disabled Disabled state
 * @param {Object} props.rest Additional props
 */
const AIButton = ({ 
    children, 
    isLoading = false,
    variant = 'primary', 
    size = 'medium',
    showSparkle = true,
    className = '',
    onClick,
    disabled = false,
    ...rest 
}) => {
    const buttonClasses = [
        'thinkrank-ai-button',
        `thinkrank-ai-button--${variant}`,
        `thinkrank-ai-button--${size}`,
        className
    ].filter(Boolean).join(' ');

    const handleClick = (event) => {
        if (!isLoading && !disabled && onClick) {
            onClick(event);
        }
    };

    return (
        <Button 
            className={buttonClasses}
            disabled={isLoading || disabled}
            onClick={handleClick}
            isPrimary={variant === 'primary'}
            isSecondary={variant === 'secondary'}
            {...rest}
        >
            {isLoading ? (
                <>
                    <Spinner />
                    {__('Processing...', 'thinkrank')}
                </>
            ) : (
                <>
                    {showSparkle && (
                        <span className="sparkle-icon" aria-hidden="true">✨</span>
                    )}
                    {children}
                </>
            )}
        </Button>
    );
};

export default AIButton;

```