<div id="root"></div>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
/** @jsx jsx */
import { css, jsx } from "https://cdn.skypack.dev/@emotion/react";
import styled from "https://cdn.skypack.dev/@emotion/styled";
import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const BRAND_COLOR = "#F06D06";

const Button = styled.button`
  color: ${(props) => (props.primary ? "white" : BRAND_COLOR)};
  background: ${(props) => (props.primary ? BRAND_COLOR : "white")};

  border-radius: 3px;
  border: 2px solid ${BRAND_COLOR};
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  &:hover {
    color: black;
  }
`;

const App = ({ name }) => {
  return (
    <div>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </div>
  );
};

ReactDOM.render(<App name="World" />, document.getElementById("root"));
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.