import { Canvas, Controls, Meta } from '@storybook/addon-docs';
import * as ButtonStories from './Button.stories';

# Button

<Meta of={ButtonStories} />

<br />

## Overview

어떤 기능이나 동작을 실행하거나 기능을 사용하기 위한 상태로 변경하는 요소 컴포넌트 입니다.

<Canvas of={ButtonStories.Default} />

<Controls />

<br />

## Usage

기본적인 <strong>Button</strong> 컴포넌트 사용방법 입니다.

```javascript
import { Button } from '@lotte-innovate/lui-vue';

export default () => <Button />;
```

<br />

## Variant

### Radius Props

`radius` props는 컴포넌트의 둥글기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={ButtonStories.Radius} />

### Scaling Props

`scaling` props는 컴포넌트의 비율을 변경합니다.

기본 값은 `100%` 입니다.

<Canvas of={ButtonStories.Scaling} />

### Weight Props

`weight` props는 컴포넌트의 텍스트 굵기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={ButtonStories.Weight} />

### Appearance Props

`appearance` props는 컴포넌트의 스타일을 변경합니다.

기본 값은 `solid` 입니다.

<Canvas of={ButtonStories.Appearance} />

### Size Props

`size` props는 컴포넌트의 크기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={ButtonStories.Size} />

### With Icon

버튼에 아이콘을 넣을 수 있습니다.

```javascript
<Button>
  <Icon>
  아이콘버튼
</Button>
```