# Component/Badge

상태, 분류 등 짧은 정보를 일반 텍스트와 구분하거나 더 강조하기 위해 사용하는 컴포넌트입니다.

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `className` | `string | undefined` | No |  |  |
| `kind` | `undefined "fill" "outline"` | No | outline |  |
| `shape` | `undefined "pill" "rectangle"` | No | pill |  |
| `size` | `undefined "small" "medium" "large"` | No | small |  |
| `color` | `undefined "pink" "blue" "gray" "red" "green" "orange"` | No | gray |  |
| `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 라벨 좌측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 BadgeColor에 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 없으면 기본으로 8이 지정됩니다. |
| `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 라벨 우측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 BadgeColor에 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 없으면 기본으로 8이 지정됩니다. |