feat (elements): add new component

add new component 'button' in two (filled/bordered) styles from figma

src/components/Button/button.props.ts

@@ -0,0 +1,5 @@
+export interface ButtonProps {
+    label:string;
+    disabled?:boolean;
+    color?: 'filled' | 'bordered';
+}

src/components/Button/button.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import Button from './button';
+
+export default {
+    title: 'Components/Button',
+    component: Button,
+} as Meta<typeof Button>;
+
+const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    label: 'Удалить',
+    color: 'filled',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+    label: 'Мои Боты',
+    color: 'bordered',
+};

src/components/Button/button.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonProps } from './button.props';
+import '../Text/index'
+const Button: React.FC<ButtonProps> = ({ label, disabled = false, color = 'primary' }) => {
+    const baseStyles = 'px-4 py-2 font-headline-small rounded';
+    const filledStyles = 'bg-color-red text-white w-full max-w-lg h-14 p-4 rounded-2xl gap-4';
+    const borderedStyles = 'font-title-large text-white border-color-grey rounded-2xl w-44 h-16 p-4 gap-16 border-2';
+
+    const buttonStyles = color === 'filled' ? filledStyles : borderedStyles;
+
+    return (
+        <button
+            className={`${baseStyles} ${buttonStyles} ${disabled}`}
+            disabled={disabled}
+        >
+            {label}
+        </button>
+    );
+};
+
+export default Button;

src/stories/button.css

@@ -28,3 +28,4 @@
   font-size: 16px;
   padding: 12px 24px;
 }
+