fbredius/storybook

import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';

<Meta title="Other/Demo/ButtonMdx" component={Button} />

# Simple Button

<ArgsTable of={Button} />

## Hello

<Story name="with text">
  <Button onClick={action('clicked')}>Hello Button</Button>
</Story>

## Emoji

<Story name="with some emoji">
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
</Story>

## Counter w/ Code

<Canvas>
  <Story name="with counter">
    {() => {
      const [counter, setCounter] = useState(0);
      const label = `Testing: ${counter}`;
      return <Button onClick={() => setCounter(counter + 1)}>{label}</Button>;
    }}
  </Story>
</Canvas>