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

# Badge

<Meta of={BadgeStories} />

<br />

## Overview

빠른 인지와 탐색을 돕기 위해 컴포넌트 근처에 표시되는 작은 문자 또는 숫자 데이터 컴포넌트 입니다.

<Canvas of={BadgeStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <Badge>badge</Badge>
</template>
```

<br />

## Variant

### Color Props

`color` props는 컴포넌트의 색상을 변경합니다.

기본 값은 `red` 입니다.

<Canvas of={BadgeStories.Color} />

### Radius Props

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

기본 값은 `medium` 입니다.

<Canvas of={BadgeStories.Radius} />

### Scaling Props

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

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

<Canvas of={BadgeStories.Scaling} />

### Weight Props

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

기본 값은 `medium` 입니다.

<Canvas of={BadgeStories.Weight} />

### Appearance Props

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

기본 값은 `solid` 입니다.

<Canvas of={BadgeStories.Appearance} />

### Size Props

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

기본 값은 `medium` 입니다.

<Canvas of={BadgeStories.Size} />