# IconButton

## Introduction

IconButton 컴포넌트는 아이콘만으로 구성된 버튼입니다. 공간 효율적이며, 직관적인 액션을 제공하는 UI 요소로 주로 툴바, 헤더, 카드 등에서 사용됩니다. 텍스트 없이도 의미를 전달할 수 있는 명확한 아이콘과 함께 사용하세요.

```tsx
<IconButton {...args} />
```

| Field    | Description | Default   |
| -------- | ----------- | --------- |
| children | 아이콘 요소      | \<Add />  |
| color    | 버튼 색상       | "primary" |
| variant  | 버튼 스타일 변형   | "solid"   |
| size     | 버튼 크기       | "md"      |
| disabled | 비활성화 상태     | —         |
| loading  | 로딩 상태       | —         |

## Usage

```tsx
import { IconButton } from '@ceed/cds';
import AddIcon from '@mui/icons-material/Add';

function MyComponent() {
  return (
    <div>
      <IconButton onClick={() => console.log('clicked')}>
        <AddIcon />
      </IconButton>

      <IconButton color="danger" onClick={() => console.log('delete')}>
        <DeleteIcon />
      </IconButton>

      <IconButton disabled>
        <EditIcon />
      </IconButton>
    </div>
  );
}
```

## Examples

### Basic Usage

기본적인 IconButton 사용법입니다.

```tsx
<div style={{
  display: 'flex',
  gap: '1rem',
  alignItems: 'center'
}}>
<IconButton>
  <Add />
</IconButton>
<IconButton>
  <Edit />
</IconButton>
<IconButton>
  <Delete />
</IconButton>
<IconButton>
  <Settings />
</IconButton>
</div>
```

### Colors

다양한 색상을 적용할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '1rem',
  alignItems: 'center'
}}>
<IconButton color="primary">
  <Add />
</IconButton>
<IconButton color="neutral">
  <Edit />
</IconButton>
<IconButton color="danger">
  <Delete />
</IconButton>
<IconButton color="success">
  <FavoriteIcon />
</IconButton>
<IconButton color="warning">
  <Settings />
</IconButton>
</div>
```

### Variants

다양한 스타일 변형을 제공합니다.

```tsx
<div style={{
  display: 'flex',
  gap: '1rem',
  alignItems: 'center'
}}>
<IconButton variant="solid">
  <Add />
</IconButton>
<IconButton variant="soft">
  <Add />
</IconButton>
<IconButton variant="outlined">
  <Add />
</IconButton>
<IconButton variant="plain">
  <Add />
</IconButton>
</div>
```

### Sizes

크기를 조절할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '1rem',
  alignItems: 'center'
}}>
<IconButton size="sm">
  <Add />
</IconButton>
<IconButton size="md">
  <Add />
</IconButton>
<IconButton size="lg">
  <Add />
</IconButton>
</div>
```

### States

다양한 상태를 표현할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem',
  alignItems: 'center'
}}>
<div>
  <h4>Normal</h4>
  <div style={{
    display: 'flex',
    gap: '1rem',
    alignItems: 'center'
  }}>
  <IconButton>
    <Add />
  </IconButton>
  <IconButton color="danger">
    <Delete />
  </IconButton>
</div>
</div>
<div>
  <h4>Disabled</h4>
  <div style={{
    display: 'flex',
    gap: '1rem',
    alignItems: 'center'
  }}>
  <IconButton disabled>
    <Add />
  </IconButton>
  <IconButton disabled color="danger">
    <Delete />
  </IconButton>
</div>
</div>
<div>
  <h4>Loading</h4>
  <div style={{
    display: 'flex',
    gap: '1rem',
    alignItems: 'center'
  }}>
  <IconButton loading>
    <Add />
  </IconButton>
  <IconButton loading color="danger">
    <Delete />
  </IconButton>
</div>
</div>
</div>
```

### With Badge

Badge와 함께 사용하여 알림 수나 상태를 표시할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '1rem',
  alignItems: 'center'
}}>
<Badge badgeContent={4} color="danger">
  <IconButton>
    <Settings />
  </IconButton>
</Badge>
<Badge badgeContent="99+" color="warning">
  <IconButton color="neutral">
    <MoreVertIcon />
  </IconButton>
</Badge>
<Badge variant="solid" color="success">
  <IconButton color="primary">
    <FavoriteIcon />
  </IconButton>
</Badge>
</div>
```

### With Tooltip

Tooltip과 함께 사용하여 버튼의 기능을 설명할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '1rem',
  alignItems: 'center'
}}>
<Tooltip title="새 항목 추가">
  <IconButton>
    <Add />
  </IconButton>
</Tooltip>
<Tooltip title="편집">
  <IconButton color="neutral">
    <Edit />
  </IconButton>
</Tooltip>
<Tooltip title="삭제">
  <IconButton color="danger">
    <Delete />
  </IconButton>
</Tooltip>
<Tooltip title="공유">
  <IconButton color="success">
    <ShareIcon />
  </IconButton>
</Tooltip>
</div>
```

### Action Buttons

실제 액션을 수행하는 버튼들의 예제입니다.

```tsx
<div style={{
  display: 'flex',
  gap: '1rem',
  alignItems: 'center'
}}>
<IconButton onClick={() => alert('Add clicked!')} title="Add new item">
  <Add />
</IconButton>
<IconButton onClick={() => alert('Edit clicked!')} color="neutral" title="Edit item">
  <Edit />
</IconButton>
<IconButton onClick={() => alert('Delete clicked!')} color="danger" title="Delete item">
  <Delete />
</IconButton>
<IconButton onClick={() => alert('Share clicked!')} color="success" title="Share item">
  <ShareIcon />
</IconButton>
<IconButton onClick={() => alert('Settings clicked!')} color="neutral" variant="outlined" title="Settings">
  <Settings />
</IconButton>
</div>
```

## Common Use Cases

### Toolbar Actions

```tsx
<div style={{ display: 'flex', gap: '0.5rem' }}>
  <IconButton onClick={handleAdd} title="Add item">
    <AddIcon />
  </IconButton>
  <IconButton onClick={handleEdit} color="neutral" title="Edit">
    <EditIcon />
  </IconButton>
  <IconButton onClick={handleDelete} color="danger" title="Delete">
    <DeleteIcon />
  </IconButton>
</div>
```

### Navigation

```tsx
<IconButton onClick={() => router.back()} variant="outlined">
  <ArrowBackIcon />
</IconButton>
```

### Settings & More Options

```tsx
<IconButton onClick={handleSettings} color="neutral">
  <SettingsIcon />
</IconButton>
<IconButton onClick={handleMoreOptions}>
  <MoreVertIcon />
</IconButton>
```

### Social Actions

```tsx
<IconButton onClick={handleLike} color="danger">
  <FavoriteIcon />
</IconButton>
<IconButton onClick={handleShare} color="primary">
  <ShareIcon />
</IconButton>
```

## Best Practices

1. **명확한 아이콘**: 사용자가 쉽게 이해할 수 있는 명확하고 직관적인 아이콘을 사용하세요.

2. **적절한 크기**: 터치 인터페이스를 고려하여 최소 44px 이상의 터치 영역을 확보하세요.

3. **접근성**:
   - `title` 속성이나 `aria-label`을 제공하여 스크린 리더 사용자를 위한 설명을 추가하세요.
   - Tooltip과 함께 사용하여 기능을 명확히 설명하세요.

4. **일관된 스타일**: 같은 맥락에서는 일관된 variant와 색상을 사용하세요.

5. **의미 있는 색상**:
   - 빨간색(danger): 삭제, 취소 등의 위험한 액션
   - 초록색(success): 저장, 승인 등의 긍정적인 액션
   - 회색(neutral): 일반적인 액션

6. **피드백 제공**: 클릭 시 명확한 피드백을 제공하여 사용자가 액션이 실행되었음을 알 수 있도록 하세요.

7. **로딩 상태**: 비동기 작업 시 `loading` prop을 사용하여 사용자에게 진행 상황을 알려주세요.
