import { Canvas, Controls, Meta } from '@storybook/addon-docs'
import * as LabelStories from './Label.stories'

# Label

<Meta of={LabelStories} />

<br />

## Overview

컴포넌트 및 컨트롤 요소의 사용 목적을 알리기 위해 사용되는 설명적 텍스트

<Canvas of={LabelStories.Default} />

<Controls />

<br />

## Usage

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

```javascript
<Label>First name</Label>
```

<br />

## Variant

### Scaling Props

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

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

<Canvas of={LabelStories.Scaling} />

### Weight Props

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

기본 값은 `medium` 입니다.

<Canvas of={LabelStories.Weight} />
### Size Props

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

기본 값은 `medium` 입니다.

<Canvas of={LabelStories.Size} />