Button

import React from 'react';
import Button from './components/Button';
// PropsBridge writes props to /props.json
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Button
        variant={props.variant || 'primary'}
        size={props.size || 'medium'}
        disabled={props.disabled || false}
        loading={props.loading || false}
      >
        Button Example
      </Button>
    </div>
  );
}

import React, { useState } from 'react';
import Button from './components/Button';

export default function App() {
  const [loading, setLoading] = useState(false);
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setLoading(true);
    setTimeout(() => {
      setCount(c => c + 1);
      setLoading(false);
    }, 1000);
  };
  
  return (
    <div style={{ padding: '2rem', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem' }}>
      <h3>Button Group Example</h3>
      <div style={{ display: 'flex', gap: '0.5rem' }}>
        <Button variant="primary" size="medium">Primary</Button>
        <Button variant="secondary" size="medium">Secondary</Button>
        <Button variant="tertiary" size="medium">Tertiary</Button>
      </div>
      
      <h3>Async Action</h3>
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
        <Button 
          variant="primary" 
          loading={loading} 
          onClick={handleClick}
        >
          Click to Increment
        </Button>
        <span>Count: {count}</span>
      </div>
      
      <h3>Size Comparison</h3>
      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
        <Button size="small">Small</Button>
        <Button size="medium">Medium</Button>
        <Button size="large">Large</Button>
      </div>
    </div>
  );
}