Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// Simple function component function Button({ label, onClick, variant = 'primary' }) { return ( <button className={`btn btn-${variant}`} onClick={onClick} > {label} </button> ); } // Component with children function Card({ title, children }) { return ( <div className="card"> <h3 className="card-title">{title}</h3> <div className="card-body">{children}</div> </div> ); } // Composing components function App() { const handleClick = () => alert('Clicked!'); return ( <Card title="My Card"> <p>This is the card content.</p> <Button label="Click Me" onClick={handleClick} /> <Button label="Cancel" variant="secondary" /> </Card> ); }
Result
Open