diff --git a/docs/Link.mdx b/docs/Link.mdx
new file mode 100644
index 000000000..bb6782702
--- /dev/null
+++ b/docs/Link.mdx
@@ -0,0 +1,22 @@
+---
+name: Link
+---
+
+import { Playground, PropsTable } from 'docz'
+import { Box, Link } from '../src'
+
+# Link
+
+
+
+ This is a default link
+
+
+ This is a non-underlined link
+
+
+ This is a non-standard color link
+
+
+
+
\ No newline at end of file
diff --git a/src/elements/Link/Link.ios.tsx b/src/elements/Link/Link.ios.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/elements/Link/Link.tsx b/src/elements/Link/Link.tsx
new file mode 100644
index 000000000..8887cbd76
--- /dev/null
+++ b/src/elements/Link/Link.tsx
@@ -0,0 +1,29 @@
+import styled from "styled-components"
+import { color as styledColor, space, SpaceProps } from "styled-system"
+import { color } from "../../helpers"
+import { Color } from "../../Theme"
+
+export interface LinkProps extends SpaceProps {
+ noUnderline?: boolean
+ color?: Color
+}
+
+/**
+ * Basic a tag
+ */
+export const Link = styled.a`
+ ${space};
+ ${styledColor};
+ cursor: pointer;
+ transition: color 0.25s;
+ text-decoration: ${props =>
+ props.noUnderline || props.color ? "none" : "underline"};
+ &:hover {
+ text-decoration: ${props => (props.color ? "none" : "underline")};
+ color: ${color("black100")};
+ }
+ &:focus {
+ border: 1px solid ${color("purple100")};
+ color: ${props => (props.color ? color(props.color) : color("black100"))};
+ }
+`
diff --git a/src/elements/Link/index.tsx b/src/elements/Link/index.tsx
new file mode 100644
index 000000000..459c7bf47
--- /dev/null
+++ b/src/elements/Link/index.tsx
@@ -0,0 +1 @@
+export * from "./Link"
diff --git a/src/elements/index.tsx b/src/elements/index.tsx
index 5994a106b..ec2b1376b 100644
--- a/src/elements/index.tsx
+++ b/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"