diff --git a/src/components/Anchor/Anchor.stories.jsx b/src/components/Anchor/Anchor.stories.jsx
new file mode 100644
index 000000000..1c6906cd4
--- /dev/null
+++ b/src/components/Anchor/Anchor.stories.jsx
@@ -0,0 +1,9 @@
+export const Default = {
+ args: {
+ color: 'default',
+ children: 'Default',
+ // eslint-disable-next-line no-script-url
+ href: 'https://ui.adslot.com',
+ target: '_blank',
+ },
+};
diff --git a/src/components/Anchor/Anchor.stories.mdx b/src/components/Anchor/Anchor.stories.mdx
new file mode 100644
index 000000000..13edfd3d4
--- /dev/null
+++ b/src/components/Anchor/Anchor.stories.mdx
@@ -0,0 +1,20 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import Anchor from './';
+import { Horizontal } from '../../../www/storybook/Decorators';
+import * as stories from './Anchor.stories.jsx';
+
+
+
+
+
+Use anchors to link to web pages or documents.
+
+Anchor shares the same props API as Button, with the addition of `href` and removal of `isLoading`.
+
+See [Button](?path=/docs/button) for further usage.
+
+
+
+
diff --git a/src/components/Anchor/index.jsx b/src/components/Anchor/index.jsx
index 5fbe955ed..82baee8b0 100644
--- a/src/components/Anchor/index.jsx
+++ b/src/components/Anchor/index.jsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import { expandDts, invariant } from '../../lib/utils';
-import { buttonSharedClasses, colors, variants, sizes } from '../Button';
+import { buttonSharedClasses } from '../Button';
const Anchor = (props) => {
const {
@@ -62,6 +62,10 @@ const Anchor = (props) => {
);
};
+const colors = ['default', 'primary', 'secondary', 'success', 'danger', 'warning', 'info'];
+const variants = ['solid', 'borderless', 'inverse', 'link'];
+const sizes = ['medium', 'large'];
+
Anchor.propTypes = {
color: PropTypes.oneOf(colors),
variant: PropTypes.oneOf(variants),