react-vite-themes/dist/pages/Documentation/ButtonDocumentation.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, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../../components/atoms/Button';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Card } from '../../components/atoms/Card';
import { Icon } from '../../components/atoms/Icon';
import { Alert } from '../../components/atoms/Alert';
import './ComponentDocumentation.scss';
const ButtonDocumentation = () => {
    const [isLoading, setIsLoading] = useState(false);
    const handleLoadingDemo = () => {
        setIsLoading(true);
        setTimeout(() => setIsLoading(false), 2000);
    };
    const variants = [
        { name: 'primary', description: 'Primary action buttons' },
        { name: 'secondary', description: 'Secondary action buttons' },
        { name: 'success', description: 'Success/positive action buttons' },
        { name: 'error', description: 'Error/danger action buttons' },
        { name: 'warning', description: 'Warning action buttons' },
        { name: 'info', description: 'Informational action buttons' },
        { name: 'light', description: 'Light variant buttons' },
        { name: 'dark', description: 'Dark variant buttons' },
        { name: 'neutral', description: 'Neutral variant buttons' }
    ];
    const sizes = [
        { name: 'xs', description: 'Extra small buttons' },
        { name: 'sm', description: 'Small buttons' },
        { name: 'md', description: 'Medium buttons (default)' },
        { name: 'lg', description: 'Large buttons' },
        { name: 'xl', description: 'Extra large buttons' }
    ];
    const colorSchemes = [
        { name: 'solid', description: 'Solid background color' },
        { name: 'outline', description: 'Outlined with transparent background' },
        { name: 'ghost', description: 'Transparent background with hover effects' },
        { name: 'link', description: 'Link-style with underline' },
        { name: 'gradient', description: 'Gradient background' },
        { name: 'glass', description: 'Glass morphism effect' }
    ];
    return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsxs(Link, { to: "/documentation", className: "back-link", children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), "Back to Documentation"] }), _jsx("h1", { children: "Button Component" }), _jsx("p", { className: "component-description", children: "A versatile button component with multiple variants, sizes, and color schemes. Supports icons, loading states, and full-width options." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { Button } } from '../../components/atoms/Button';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", children: "Primary Button" }), _jsx(Button, { variant: "secondary", children: "Secondary Button" }), _jsx(Button, { variant: "success", children: "Success Button" })] }), _jsx(CodeBlock, { code: `<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="success">Success Button</Button>`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Button variants define the semantic meaning and visual style of the button." }), _jsx("div", { className: "variants-grid", children: variants.map((variant) => (_jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: variant.name.charAt(0).toUpperCase() + variant.name.slice(1) }), _jsx("p", { children: variant.description }), _jsx("div", { className: "example-content", children: _jsx(Button, { variant: variant.name, size: "sm", children: variant.name.charAt(0).toUpperCase() + variant.name.slice(1) }) }), _jsx(CodeBlock, { code: `<Button variant="${variant.name}">${variant.name.charAt(0).toUpperCase() + variant.name.slice(1)}</Button>`, language: "tsx" })] }, variant.name))) })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the button size using the size prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: sizes.map((size) => (_jsx(Button, { variant: "primary", size: size.name, children: size.name.toUpperCase() }, size.name))) }), _jsx(CodeBlock, { code: `<Button variant="primary" size="xs">XS</Button>
<Button variant="primary" size="sm">SM</Button>
<Button variant="primary" size="md">MD</Button>
<Button variant="primary" size="lg">LG</Button>
<Button variant="primary" size="xl">XL</Button>`, language: "tsx" })] })] }), _jsxs("section", { className: "color-schemes-section", children: [_jsx("h2", { children: "Color Schemes" }), _jsx("p", { children: "Different color schemes provide various visual styles for buttons." }), _jsx("div", { className: "color-schemes-grid", children: colorSchemes.map((scheme) => (_jsxs(Card, { variant: "neutral", style: "elevated", className: "scheme-card", children: [_jsx("h3", { children: scheme.name.charAt(0).toUpperCase() + scheme.name.slice(1) }), _jsx("p", { children: scheme.description }), _jsx("div", { className: "example-content", children: _jsx(Button, { variant: "primary", colorScheme: scheme.name, size: "sm", children: scheme.name.charAt(0).toUpperCase() + scheme.name.slice(1) }) }), _jsx(CodeBlock, { code: `<Button variant="primary" colorScheme="${scheme.name}">${scheme.name.charAt(0).toUpperCase() + scheme.name.slice(1)}</Button>`, language: "tsx" })] }, scheme.name))) })] }), _jsxs("section", { className: "icons-section", children: [_jsx("h2", { children: "Icons" }), _jsx("p", { children: "Add icons to buttons using the leftIcon, rightIcon, or centerIcon props." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", leftIcon: "star", size: "sm", children: "Left Icon" }), _jsx(Button, { variant: "primary", rightIcon: "arrow-right", size: "sm", children: "Right Icon" }), _jsx(Button, { variant: "primary", centerIcon: "heart", size: "sm" })] }), _jsx(CodeBlock, { code: `<Button variant="primary" leftIcon="star">Left Icon</Button>
<Button variant="primary" rightIcon="arrow-right">Right Icon</Button>
<Button variant="primary" centerIcon="heart" />`, language: "tsx" })] })] }), _jsxs("section", { className: "states-section", children: [_jsx("h2", { children: "States" }), _jsxs("div", { className: "states-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "state-card", children: [_jsx("h3", { children: "Loading State" }), _jsx("p", { children: "Show a loading spinner while the button is processing." }), _jsx("div", { className: "example-content", children: _jsx(Button, { variant: "primary", isLoading: isLoading, onClick: handleLoadingDemo, size: "sm", children: isLoading ? 'Loading...' : 'Click to Load' }) }), _jsx(CodeBlock, { code: `const [isLoading, setIsLoading] = useState(false);

<Button 
  variant="primary" 
  isLoading={isLoading}
  onClick={() => setIsLoading(true)}
>
  {isLoading ? 'Loading...' : 'Click to Load'}
</Button>`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "state-card", children: [_jsx("h3", { children: "Disabled State" }), _jsx("p", { children: "Disable button interaction and show visual feedback." }), _jsx("div", { className: "example-content", children: _jsx(Button, { variant: "primary", isDisabled: true, size: "sm", children: "Disabled Button" }) }), _jsx(CodeBlock, { code: `<Button variant="primary" isDisabled>Disabled Button</Button>`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "state-card", children: [_jsx("h3", { children: "Full Width" }), _jsx("p", { children: "Make the button span the full width of its container." }), _jsx("div", { className: "example-content", children: _jsx(Button, { variant: "primary", isFullWidth: true, size: "sm", children: "Full Width Button" }) }), _jsx(CodeBlock, { code: `<Button variant="primary" isFullWidth>Full Width Button</Button>`, language: "tsx" })] })] })] }), _jsxs("section", { className: "gradient-section", children: [_jsx("h2", { children: "Gradient Buttons" }), _jsx("p", { children: "Use gradient color schemes for eye-catching buttons." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", colorScheme: "gradient", size: "sm", children: "Primary Gradient" }), _jsx(Button, { variant: "success", colorScheme: "gradient", size: "sm", children: "Success Gradient" }), _jsx(Button, { variant: "error", colorScheme: "gradient", size: "sm", children: "Error Gradient" }), _jsx(Button, { variant: "warning", colorScheme: "gradient", size: "sm", children: "Warning Gradient" })] }), _jsx(CodeBlock, { code: `<Button variant="primary" colorScheme="gradient">Primary Gradient</Button>
<Button variant="success" colorScheme="gradient">Success Gradient</Button>
<Button variant="error" colorScheme="gradient">Error Gradient</Button>
<Button variant="warning" colorScheme="gradient">Warning Gradient</Button>`, language: "tsx" })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "string" }), _jsx("td", { children: "''" }), _jsx("td", { children: "Button variant (primary, secondary, success, danger, warning, info, light, dark, neutral)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Button size (xs, sm, md, lg, xl)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "colorScheme" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'solid'" }), _jsx("td", { children: "Color scheme (solid, outline, ghost, link, gradient, glass)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isLoading" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Show loading spinner" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isDisabled" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Disable button interaction" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isFullWidth" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Make button full width" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftIcon" }), _jsx("td", { children: 'ReactNode | string' }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Icon to display on the left" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightIcon" }), _jsx("td", { children: 'ReactNode | string' }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Icon to display on the right" })] }), _jsxs("tr", { children: [_jsx("td", { children: "centerIcon" }), _jsx("td", { children: 'ReactNode | string' }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Icon to display in center (hides text)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "children" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Button content" })] }), _jsxs("tr", { children: [_jsx("td", { children: "className" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Additional CSS classes" })] })] })] }) }) })] }), _jsxs("section", { className: "best-practices-section", children: [_jsx("h2", { children: "Best Practices" }), _jsxs("div", { className: "practices-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u2705 Do" }), _jsxs("ul", { children: [_jsx("li", { children: "Use primary variant for main actions" }), _jsx("li", { children: "Use secondary variant for secondary actions" }), _jsx("li", { children: "Use danger variant for destructive actions" }), _jsx("li", { children: "Provide clear, descriptive button text" }), _jsx("li", { children: "Use icons to enhance visual clarity" }), _jsx("li", { children: "Show loading state for async operations" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u274C Don't" }), _jsxs("ul", { children: [_jsx("li", { children: "Don't use too many different variants on one page" }), _jsx("li", { children: "Don't use danger variant for non-destructive actions" }), _jsx("li", { children: "Don't use vague button text like \"Click here\"" }), _jsx("li", { children: "Don't disable buttons without clear indication why" }), _jsx("li", { children: "Don't use icons without text unless the icon is universally understood" }), _jsx("li", { children: "Don't use gradient buttons for every action" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Button component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper ARIA attributes for loading and disabled states" }), _jsx("li", { children: "Keyboard navigation support" }), _jsx("li", { children: "Focus management with visible focus indicators" }), _jsx("li", { children: "Screen reader support for button states" }), _jsx("li", { children: "High contrast support for all color schemes" })] })] })] })] }) }));
};
export default ButtonDocumentation;