Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── src/components/ui/Button.jsx ─────────────────────────────
const VARIANTS = {
  primary: { background: '#3b82f6', color: '#fff' },
  secondary: { background: '#e5e7eb', color: '#111' },
  danger: { background: '#ef4444', color: '#fff' },
};

function Button({ children, variant = 'primary', onClick, disabled = false }) {
  return (
    <button
      style={{ ...VARIANTS[variant], padding: '8px 16px', borderRadius: 6, border: 'none', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.6 : 1 }}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

export default Button;

// ── src/components/ui/index.js (barrel export) ───────────────
// export { default as Button } from './Button';
// export { default as Card }   from './Card';
// export { default as Input }  from './Input';

// ── src/pages/HomePage.jsx ───────────────────────────────────
// import { Button, Card } from '../components/ui';
//
// function HomePage() {
//   return (
//     <Card title="Welcome">
//       <Button onClick={() => alert('clicked')}>Get Started</Button>
//       <Button variant="secondary">Learn More</Button>
//     </Card>
//   );
// }
//
// export default HomePage;