diff --git a/src/colors.stories.tsx b/src/colors.stories.tsx
index dfb97db6..7caa68ac 100644
--- a/src/colors.stories.tsx
+++ b/src/colors.stories.tsx
@@ -26,7 +26,7 @@ const ColorDisplay = styled.div<{ color: string }>`
`;
export default {
- title: 'Colors',
+ title: 'Utils/Colors',
};
export const ColorsSample = (): React.ReactElement => {
diff --git a/src/inputs/Link/index.stories.tsx b/src/inputs/Link/index.stories.tsx
new file mode 100644
index 00000000..0b892c35
--- /dev/null
+++ b/src/inputs/Link/index.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Link from './index';
+import { Icon } from '../../';
+
+export default {
+ title: 'inputs/Link',
+ component: Link,
+ parameters: {
+ componentSubtitle: 'Link component.',
+ },
+};
+
+export const Default = (): React.ReactElement => (
+ Some text
+);
+
+export const withColor = (): React.ReactElement => (
+
+ Some text
+
+);
+
+export const WithCustomSize = (): React.ReactElement => (
+
+ Some text
+
+);
+
+const Wrapper = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+export const WithCustomChild = (): React.ReactElement => (
+
+
+
+ Some text
+
+
+);
diff --git a/src/inputs/Link/index.tsx b/src/inputs/Link/index.tsx
new file mode 100644
index 00000000..bd3bc333
--- /dev/null
+++ b/src/inputs/Link/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ThemeColors, ThemeTextSize } from '../../theme';
+
+export interface Props extends React.AnchorHTMLAttributes {
+ size?: ThemeTextSize;
+ color?: ThemeColors;
+}
+
+const StyledLink = styled.a`
+ text-decoration: underline;
+ cursor: pointer;
+ color: ${({ theme, color = 'primary' }) => theme['colors'][color]};
+ font-family: inherit;
+ font-size: ${({ size = 'md', theme }) => theme.text.size[size].fontSize};
+`;
+
+const Link: React.FC = ({ children, ...rest }): React.ReactElement => {
+ return {children};
+};
+
+export default Link;