import React from 'react'; import ReactDOM from 'react-dom'; // pass children as prop // use string literals // spread in other props, the onClick const Badge = ({ children, color, ...props }) => { return <span className={`badge ${color}`} {...props}>{children}</span> } const App = () => { return ( <section> <h1>Check out these badges!</h1> <Badge color="green">Success</Badge> This is operational. <br /> <Badge color="red">Removed</Badge> This is critical. <br /> <Badge color="yellow">Warning</Badge> This is a warning. <br /> <Badge color="blue" onClick={() => { console.log('clicked!') }}>Beta</Badge> This is in progress. <br /> </section> ) } const domElement = document.getElementById('root') ReactDOM.render(<App />, domElement)
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter