src/components/LinkButton.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/** @jsx jsx */
import React from "react";
import { jsx } from "theme-ui";
import { Styled } from "theme-ui";

function LinkButton({ children, href, forwardedRef, ...props }) {
  return (
    <Styled.a href={href} ref={forwardedRef} {...props}>
      <span
        sx={{
          backgroundColor: "primary",
          color: "background",
          border: "none",
          borderRadius: "5px",
          padding: "10px"
        }}
      >
        {children}
      </span>
    </Styled.a>
  );
}

export default React.forwardRef((props, ref) => (
  <LinkButton {...props} forwardedRef={ref} />
));