Add Link element

docs/Link.mdx

@@ -0,0 +1,22 @@
+---
+name: Link
+---
+
+import { Playground, PropsTable } from 'docz'
+import { Box, Link } from '../src'
+
+# Link
+
+<Playground>
+  <Box>
+    <Link>This is a default link</Link>
+  </Box>
+  <Box>
+    <Link noUnderline>This is a non-underlined link</Link>
+  </Box>
+  <Box>
+    <Link color="purple100">This is a non-standard color link</Link>
+  </Box>
+</Playground>
+
+<PropsTable of={Link} />

src/elements/Link/Link.tsx

@@ -0,0 +1,33 @@
+import styled from "styled-components"
+import {
+  color as styledColor,
+  ColorProps,
+  space,
+  SpaceProps,
+} from "styled-system"
+import { color } from "../../helpers"
+
+export interface LinkProps extends SpaceProps, ColorProps {
+  noUnderline?: boolean
+}
+
+/**
+ * Basic a tag
+ */
+export const Link = styled.a<LinkProps>`
+  ${space};
+  ${styledColor};
+  text-decoration: ${props =>
+    props.noUnderline || props.color ? "none" : "underline"};
+  cursor: pointer;
+  transition: color 0.25s;
+  :hover {
+    text-decoration: ${props => (props.color ? "none" : "underline")};
+    color: ${color("black100")};
+  }
+  :focus {
+    border: 1px solid ${color("purple100")};
+    color: ${props =>
+      props.color ? color(props.color as any) : color("black100")};
+  }
+`

src/elements/Link/index.tsx

@@ -0,0 +1 @@
+export * from "./Link"

src/elements/index.tsx

@@ -10,6 +10,7 @@ export * from "./Flex"
 export * from "./Image"
 export * from "./Join"
 export * from "./Message"
+export * from "./Link"
 export * from "./Radio"
 export * from "./RadioGroup"
 export * from "./Select"