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

<Meta title="Components/Tooltip" />

# Button API

The API documentation of the Button React component. Learn more about the props and the CSS customization points.

## Usage

```jsx
<Button aria-label="Whats up!" className="ods-tooltip" data-tooltip-pos="up">
  Hover me!
</Button>
```

## Playground

<Canvas>
  <Story
    name="Usage"
    args={{
      text: 'Whats up!',
      direction: 'up',
    }}
    argTypes={{
      text: {
        control: 'text',
      },
      direction: {
        options: [
          'up',
          'down',
          'left',
          'right',
          'up-left',
          'up-right',
          'down-left',
          'down-right',
        ],
        control: { type: 'select' },
      },
    }}
  >
    {(props) => (
      <Button
        aria-label={props.text}
        className="ods-tooltip"
        data-tooltip-pos={props.direction}
        id="switch-playground"
      >
        Hover me!
      </Button>
    )}
  </Story>
</Canvas>
