flashcardui/src/components/Button/Button.stories.mdx

> UI library for flash card application

import { ArgsTable, Story, Meta, Canvas } from '@storybook/addon-docs';
import { Button, ButtonProps } from './Button.tsx';

<Meta title="DOCS/Button" component={Button} />

export const Template = (args) => <Button {...args} />;

# Button

Let's define a story for our `Button` component:

<Story
  name="Our Button"
  args={{
    label: 'ButtonUI',
    color: '#00e676',
    hover: '#00c853',
    buttonType: 'outlined',
  }}
>
  {Template.bind({})}
</Story>

<ArgsTable story="My Button" />

Description for Secondary:

<Canvas>
  <Story
    name="My Button"
    args={{
      label: 'ButtonUI Secondary',
      color: '#388e3c',
      hover: '#1b5e20',
      buttonType: 'contained',
      rounded: true,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>