# Component/Button/IconButton

> Props: component-button-iconbutton.props.txt

## Examples


### As Child

```tsx
{
  render: () => {
    return <IconButton asChild icon={<a href='https://partners.kakaostyle.com' target='_blank' rel='noreferrer'>
            <IconLinkExternal size={20} />
          </a>} />;
  }
}
```

### Circle

```tsx
{
  render: args => {
    const button_size_keys = reverse(Object.keys(icon_button_size_css));
    const is_circle = args.shape === 'circle';
    return <Stack direction='column'>
        {is_circle && <Stack direction='row' p={20}>
            <BaseText as='h1' kind='Heading_20_Bold' color={colors.red400}>
              Shape 가 circle 인 경우 kind 옵션은 동작하지 않습니다.
            </BaseText>
          </Stack>}
        <Stack direction='row' gap={12} align='center'>
          <Stack direction='column' gap={16} p={20} align='center'>
            <IconButton {...args} icon={<IconArrowChevronLeft />} />
            <IconButton {...args} icon={<IconArrowChevronLeft />} disabled />
          </Stack>
          <Stack direction='column' gap={16} p={20} align='center' style={{
          backgroundColor: colors.gray400
        }}>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map(key => <IconButton {...args} size={key as IconButtonSize} key={key} icon={<IconArrowChevronLeft />} />)}
            </Stack>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map(key => <IconButton {...args} size={key as IconButtonSize} key={key} icon={<IconArrowChevronLeft />} disabled />)}
            </Stack>
          </Stack>
        </Stack>
        {!is_circle && <>
            <Stack direction='row' gap={12} align='center'>
              <Stack direction='column' gap={16} p={20} align='center'>
                <IconButton {...args} kind='outlined_primary' icon={<IconPlus size={20} />} />
                <IconButton {...args} kind='outlined_primary' icon={<IconPlus size={20} />} disabled />
              </Stack>
              <Stack direction='column' gap={16} p={20} align='center' style={{
            backgroundColor: colors.gray400
          }}>
                <Stack direction='row' gap={24} align='center'>
                  {button_size_keys.map(key => <IconButton {...args} kind='outlined_primary' size={key as IconButtonSize} key={key} icon={<IconPlus size={20} />} />)}
                </Stack>
                <Stack direction='row' gap={24} align='center'>
                  {button_size_keys.map(key => <IconButton {...args} kind='outlined_primary' size={key as IconButtonSize} key={key} icon={<IconPlus size={20} />} disabled />)}
                </Stack>
              </Stack>
            </Stack>

            <Stack direction='row' gap={12} align='center'>
              <Stack direction='column' gap={16} p={20} align='center'>
                <IconButton {...args} kind='outlined_negative' icon={<IconMinus size={20} />} />
                <IconButton {...args} kind='outlined_negative' icon={<IconMinus size={20} />} disabled />
              </Stack>
              <Stack direction='column' gap={16} p={20} align='center' style={{
            backgroundColor: colors.gray400
          }}>
                <Stack direction='row' gap={24} align='center'>
                  {button_size_keys.map(key => <IconButton {...args} kind='outlined_negative' size={key as IconButtonSize} key={key} icon={<IconMinus size={20} />} />)}
                </Stack>
                <Stack direction='row' gap={24} align='center'>
                  {button_size_keys.map(key => <IconButton {...args} kind='outlined_negative' size={key as IconButtonSize} key={key} icon={<IconMinus size={20} />} disabled />)}
                </Stack>
              </Stack>
            </Stack>
          </>}
      </Stack>;
  },
  args: {
    shape: 'circle'
  }
}
```

### Rectangle

```tsx
{
  render: args => {
    const button_size_keys = reverse(Object.keys(icon_button_size_css));
    const is_circle = args.shape === 'circle';
    return <Stack direction='column'>
        {is_circle && <Stack direction='row' p={20}>
            <BaseText as='h1' kind='Heading_20_Bold' color={colors.red400}>
              Shape 가 circle 인 경우 kind 옵션은 동작하지 않습니다.
            </BaseText>
          </Stack>}
        <Stack direction='row' gap={12} align='center'>
          <Stack direction='column' gap={16} p={20} align='center'>
            <IconButton {...args} icon={<IconArrowChevronLeft />} />
            <IconButton {...args} icon={<IconArrowChevronLeft />} disabled />
          </Stack>
          <Stack direction='column' gap={16} p={20} align='center' style={{
          backgroundColor: colors.gray400
        }}>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map(key => <IconButton {...args} size={key as IconButtonSize} key={key} icon={<IconArrowChevronLeft />} />)}
            </Stack>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map(key => <IconButton {...args} size={key as IconButtonSize} key={key} icon={<IconArrowChevronLeft />} disabled />)}
            </Stack>
          </Stack>
        </Stack>
        {!is_circle && <>
            <Stack direction='row' gap={12} align='center'>
              <Stack direction='column' gap={16} p={20} align='center'>
                <IconButton {...args} kind='outlined_primary' icon={<IconPlus size={20} />} />
                <IconButton {...args} kind='outlined_primary' icon={<IconPlus size={20} />} disabled />
              </Stack>
              <Stack direction='column' gap={16} p={20} align='center' style={{
            backgroundColor: colors.gray400
          }}>
                <Stack direction='row' gap={24} align='center'>
                  {button_size_keys.map(key => <IconButton {...args} kind='outlined_primary' size={key as IconButtonSize} key={key} icon={<IconPlus size={20} />} />)}
                </Stack>
                <Stack direction='row' gap={24} align='center'>
                  {button_size_keys.map(key => <IconButton {...args} kind='outlined_primary' size={key as IconButtonSize} key={key} icon={<IconPlus size={20} />} disabled />)}
                </Stack>
              </Stack>
            </Stack>

            <Stack direction='row' gap={12} align='center'>
              <Stack direction='column' gap={16} p={20} align='center'>
                <IconButton {...args} kind='outlined_negative' icon={<IconMinus size={20} />} />
                <IconButton {...args} kind='outlined_negative' icon={<IconMinus size={20} />} disabled />
              </Stack>
              <Stack direction='column' gap={16} p={20} align='center' style={{
            backgroundColor: colors.gray400
          }}>
                <Stack direction='row' gap={24} align='center'>
                  {button_size_keys.map(key => <IconButton {...args} kind='outlined_negative' size={key as IconButtonSize} key={key} icon={<IconMinus size={20} />} />)}
                </Stack>
                <Stack direction='row' gap={24} align='center'>
                  {button_size_keys.map(key => <IconButton {...args} kind='outlined_negative' size={key as IconButtonSize} key={key} icon={<IconMinus size={20} />} disabled />)}
                </Stack>
              </Stack>
            </Stack>
          </>}
      </Stack>;
  }
}
```

### With Input

```tsx
{
  render: args => <Stack direction='row' gap={8} align='center'>
      <Input width='100%' />
      <IconButton kind='outlined_primary' {...args} icon={<IconPlus size={20} />} />
    </Stack>
}
```