creating button component

packages/docs/package.json

@@ -18,9 +18,10 @@
   },
   "dependencies": {
     "@ignite-ui/eslint-config": "*",
-    "@ignite-ui/ts-config": "*",
     "@ignite-ui/react": "*",
     "@ignite-ui/tokens": "*",
+    "@ignite-ui/ts-config": "*",
+    "phosphor-react": "^1.4.1",
     "polished": "^4.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/docs/src/stories/Button.stories.tsx

@@ -0,0 +1,48 @@
+import { Button, ButtonProps } from '@ignite-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { ArrowRight } from 'phosphor-react';
+
+export default {
+  title: 'Form/Button',
+  component: Button,
+  args: {
+    children: 'Send',
+  },
+} as Meta<ButtonProps>;
+
+export const Primary: StoryObj<ButtonProps> = {};
+export const Secondary: StoryObj<ButtonProps> = {
+  args: {
+    variant: 'secondary',
+    children: 'Create new',
+  },
+};
+
+export const Tertiary: StoryObj<ButtonProps> = {
+  args: {
+    variant: 'tertiary',
+    children: 'Cancel',
+  },
+};
+
+export const Small: StoryObj<ButtonProps> = {
+  args: {
+    size: 'sm',
+  },
+};
+export const WithIcon: StoryObj<ButtonProps> = {
+  args: {
+    children: (
+      <>
+        Next step
+        <ArrowRight weight="bold" />
+      </>
+    ),
+  },
+};
+
+export const Disabled: StoryObj<ButtonProps> = {
+  args: {
+    disabled: true,
+  },
+};