diff --git a/src/components/experimental/Button/Button.tsx b/src/components/experimental/Button/Button.tsx
new file mode 100644
index 00000000..61cb9a40
--- /dev/null
+++ b/src/components/experimental/Button/Button.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { Button as BaseButton } from '../../Button/Button';
+import { theme as experimentalTheme, theme } from '../../../essentials/experimental/theme';
+import { get } from '../../../utils/experimental/themeGet';
+
+const ButtonStyled = styled(BaseButton).attrs({ theme })`
+ border-radius: ${get('radii.3')};
+ padding: ${get('space.6')} ${get('space.4')};
+
+ // TODO: HOVER
+ // TODO: SECONDARY VARIANT
+`;
+
+function Button() {
+ return (
+
+
+
+ );
+}
+
+export default Button;
+export { Button };
diff --git a/src/components/experimental/Button/docs/Button.stories.tsx b/src/components/experimental/Button/docs/Button.stories.tsx
new file mode 100644
index 00000000..56f0c14f
--- /dev/null
+++ b/src/components/experimental/Button/docs/Button.stories.tsx
@@ -0,0 +1,90 @@
+import { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+import { Button } from '../Button';
+import TrashIcon from '../../../../icons/actions/TrashIcon';
+
+const meta: Meta = {
+ title: 'Experimental/Components/Button',
+ component: Button,
+ args: {
+ children: 'Button title'
+ },
+ argTypes: {
+ children: {
+ description: 'Button caption'
+ },
+ variant: {
+ control: 'radio',
+ options: ['primary', 'secondary', 'danger']
+ },
+ size: {
+ control: 'radio',
+ options: ['small', 'medium']
+ },
+ as: {
+ description: 'html tag to use',
+ control: 'text',
+ table: {
+ defaultValue: {
+ summary: 'button'
+ }
+ }
+ },
+ ref: {
+ table: {
+ disable: true
+ }
+ },
+ theme: {
+ table: {
+ disable: true
+ }
+ },
+ forwardedAs: {
+ table: {
+ disable: true
+ }
+ }
+ }
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Secondary: Story = {
+ args: {
+ variant: 'secondary'
+ }
+};
+
+export const Danger: Story = {
+ args: {
+ variant: 'danger'
+ }
+};
+
+export const Disabled: Story = {
+ args: {
+ disabled: true
+ }
+};
+
+export const Small: Story = {
+ args: {
+ size: 'small'
+ }
+};
+
+export const WithIcon: Story = {
+ args: {
+ children: (
+ <>
+ Remove
+ >
+ ),
+ variant: 'danger'
+ }
+};