<div id="root"></div>
body {
  margin: 0;
}
import { styled } from "https://cdn.skypack.dev/@stitches/react";
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", {
  background: "none",
  border: `2px solid ${BRAND_COLOR}`,
  color: BRAND_COLOR,
  borderRadius: "3px",
  padding: "1rem 2rem",
  margin: "0.5rem",
  "&:hover": {
    color: "black"
  },

  variants: {
    type: {
      primary: {
        backgroundColor: BRAND_COLOR,
        color: "white"
      }
    }
  }
});

const Container = styled("div", {
  display: "grid",
  height: "100vh",
  placeItems: "center"
});

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

ReactDOM.render(<App />, 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.