# Component/Button/Button

버튼을 눌러 특정한 동작을 수행할 수 있습니다. 위계와 기능에 따라 스타일이 나뉘므로 적절하게 사용해야 합니다.

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `fill` | `boolean | undefined` | No |  |  |
| `variant` | `undefined "filled" "outlined"` | No | filled |  |
| `color` | `undefined "primary" "secondary" "emphasis" "destructive"` | No | secondary |  |
| `size` | `undefined "small" "medium" "large" "xsmall" "xlarge" "xxlarge"` | No | medium |  |
| `loading` | `boolean | undefined` | No | false |  |
| `leftIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 좌측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 없으면 variant와 color에 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
| `rightIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 우측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 없으면 variant와 color에 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
| `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다.  reference: https://www.radix-ui.com/primitives/docs/guides/composition |
| `type` | `undefined "button" "submit" "reset"` | No | button |  |