# Component/Button/Button

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

## Examples


### As Child

```tsx
{
  render: () => {
    return <Stack>
        <Button asChild>
          <a href='https://partners.kakaostyle.com' target='_blank' rel='noreferrer'>
            https://partners.kakaostyle.com/
          </a>
        </Button>
      </Stack>;
  }
}
```

### Black

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    const outlined_kind = `outlined_${args.kind}` as ButtonOutlinedKind;

    return (
      <Stack direction='column'>
        <Stack direction='row' gap={12} align='center'>
          <Stack direction='column' gap={16} p={20} align='center'>
            <Button {...args} />
            <Button {...args} disabled />
          </Stack>
          <Stack direction='column' gap={16} p={20} align='center' style={{ backgroundColor: colors.gray250 }}>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Stack key={key} direction='column' gap={4}>
                  <BaseText kind='Body_14_SemiBold'>{key}</BaseText>
                  <Button {...args} size={key as ButtonSize} />
                </Stack>
              ))}
            </Stack>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Button {...args} size={key as ButtonSize} key={key} disabled />
              ))}
            </Stack>
          </Stack>
        </Stack>
        <Stack direction='row' gap={12} align='center'>
          <Stack direction='column' gap={16} p={20} align='center'>
            <Button {...args} kind={outlined_kind} />
            <Button {...args} kind={outlined_kind} disabled />
          </Stack>
          <Stack direction='column' gap={16} p={20} align='center' style={{ backgroundColor: colors.gray250 }}>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Stack key={key} direction='column' gap={4}>
                  <BaseText kind='Body_14_SemiBold'>{key}</BaseText>
                  <Button {...args} kind={outlined_kind} size={key as ButtonSize} key={key} />
                </Stack>
              ))}
            </Stack>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Button {...args} kind={outlined_kind} size={key as ButtonSize} key={key} disabled />
              ))}
            </Stack>
          </Stack>
        </Stack>
      </Stack>
    );
  },
  args: {
    kind: 'black',
    size: 'medium',
    children: '버튼'
  }
}
```

### Disabled

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    return (
      <>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='primary' size={key as ButtonSize} key={key} disabled />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='outlined_secondary' size={key as ButtonSize} key={key} disabled />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='black' size={key as ButtonSize} key={key} disabled />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='outlined_negative' size={key as ButtonSize} key={key} disabled />
          ))}
        </Stack>
      </>
    );
  },
  args: {
    children: '버튼',
    endIcon: <IconCirclePlusFill size={14} />
  }
}
```

### Disabled With Color

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    return (
      <>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='primary' size={key as ButtonSize} key={key} disabled />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='outlined_secondary' size={key as ButtonSize} key={key} disabled />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='black' size={key as ButtonSize} key={key} disabled />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='outlined_negative' size={key as ButtonSize} key={key} disabled />
          ))}
        </Stack>
      </>
    );
  },
  args: {
    children: '버튼',
    endIcon: <IconCirclePlusFill size={14} color={semantic_colors.state.positive} />
  }
}
```

### End Icon

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    return (
      <>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='primary' size={key as ButtonSize} key={key} />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} size={key as ButtonSize} key={key} />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='black' size={key as ButtonSize} key={key} />
          ))}
        </Stack>
      </>
    );
  },
  args: {
    children: '버튼',
    endIcon: <IconCirclePlus size={14} />
  }
}
```

### End Icon With Color

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    return (
      <>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='primary' size={key as ButtonSize} key={key} />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} size={key as ButtonSize} key={key} />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='black' size={key as ButtonSize} key={key} />
          ))}
        </Stack>
      </>
    );
  },
  args: {
    children: '버튼',
    endIcon: <IconCirclePlusFill size={14} color={semantic_colors.state.positive} />
  }
}
```

### Focus

```tsx
{
  render: () => {
    const ref = useRef<HTMLButtonElement>(null);
    useEffect(() => {
      ref.current?.focus();
    }, [ref.current]);
    return <>
        <BaseText kind='Body_15_SemiBold'>키보드 Tab키를 눌러서 포커스를 옮겨볼 수 있어요!</BaseText>
        <Stack direction='row' gap={12} align='center'>
          <Button ref={ref}>버튼</Button>
          <Button kind='primary'>버튼</Button>
          <Button kind='secondary'>버튼</Button>
          <Button kind='black'>버튼</Button>
        </Stack>
      </>;
  }
}
```

### Full Width

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    return (
      <Stack direction='row' gap={10}>
        {button_size_keys.map((key) => (
          <Button {...args} size={key as ButtonSize} key={key} />
        ))}
      </Stack>
    );
  },
  args: {
    children: '버튼',
    fill: true,
    kind: 'primary'
  }
}
```

### Loading

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    return (
      <>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='primary' size={key as ButtonSize} key={key} />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} size={key as ButtonSize} key={key} />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='black' size={key as ButtonSize} key={key} />
          ))}
        </Stack>
      </>
    );
  },
  args: {
    children: '엑셀 다운로드',
    loading: true,
    startIcon: <IconExcel size={14} />,
    endIcon: <IconDownload size={14} />
  }
}
```

### Negative

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    const outlined_kind = `outlined_${args.kind}` as ButtonOutlinedKind;

    return (
      <Stack direction='column'>
        <Stack direction='row' gap={12} align='center'>
          <Stack direction='column' gap={16} p={20} align='center'>
            <Button {...args} />
            <Button {...args} disabled />
          </Stack>
          <Stack direction='column' gap={16} p={20} align='center' style={{ backgroundColor: colors.gray250 }}>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Stack key={key} direction='column' gap={4}>
                  <BaseText kind='Body_14_SemiBold'>{key}</BaseText>
                  <Button {...args} size={key as ButtonSize} />
                </Stack>
              ))}
            </Stack>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Button {...args} size={key as ButtonSize} key={key} disabled />
              ))}
            </Stack>
          </Stack>
        </Stack>
        <Stack direction='row' gap={12} align='center'>
          <Stack direction='column' gap={16} p={20} align='center'>
            <Button {...args} kind={outlined_kind} />
            <Button {...args} kind={outlined_kind} disabled />
          </Stack>
          <Stack direction='column' gap={16} p={20} align='center' style={{ backgroundColor: colors.gray250 }}>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Stack key={key} direction='column' gap={4}>
                  <BaseText kind='Body_14_SemiBold'>{key}</BaseText>
                  <Button {...args} kind={outlined_kind} size={key as ButtonSize} key={key} />
                </Stack>
              ))}
            </Stack>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Button {...args} kind={outlined_kind} size={key as ButtonSize} key={key} disabled />
              ))}
            </Stack>
          </Stack>
        </Stack>
      </Stack>
    );
  },
  args: {
    kind: 'negative',
    size: 'medium',
    children: '버튼',
    onClick: () => alert('clicked')
  }
}
```

### Primary

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    const outlined_kind = `outlined_${args.kind}` as ButtonOutlinedKind;

    return (
      <Stack direction='column'>
        <Stack direction='row' gap={12} align='center'>
          <Stack direction='column' gap={16} p={20} align='center'>
            <Button {...args} />
            <Button {...args} disabled />
          </Stack>
          <Stack direction='column' gap={16} p={20} align='center' style={{ backgroundColor: colors.gray250 }}>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Stack key={key} direction='column' gap={4}>
                  <BaseText kind='Body_14_SemiBold'>{key}</BaseText>
                  <Button {...args} size={key as ButtonSize} />
                </Stack>
              ))}
            </Stack>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Button {...args} size={key as ButtonSize} key={key} disabled />
              ))}
            </Stack>
          </Stack>
        </Stack>
        <Stack direction='row' gap={12} align='center'>
          <Stack direction='column' gap={16} p={20} align='center'>
            <Button {...args} kind={outlined_kind} />
            <Button {...args} kind={outlined_kind} disabled />
          </Stack>
          <Stack direction='column' gap={16} p={20} align='center' style={{ backgroundColor: colors.gray250 }}>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Stack key={key} direction='column' gap={4}>
                  <BaseText kind='Body_14_SemiBold'>{key}</BaseText>
                  <Button {...args} kind={outlined_kind} size={key as ButtonSize} key={key} />
                </Stack>
              ))}
            </Stack>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Button {...args} kind={outlined_kind} size={key as ButtonSize} key={key} disabled />
              ))}
            </Stack>
          </Stack>
        </Stack>
      </Stack>
    );
  },
  args: {
    kind: 'primary',
    size: 'medium',
    children: '버튼'
  }
}
```

### Secondary

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    const outlined_kind = `outlined_${args.kind}` as ButtonOutlinedKind;

    return (
      <Stack direction='column'>
        <Stack direction='row' gap={12} align='center'>
          <Stack direction='column' gap={16} p={20} align='center'>
            <Button {...args} />
            <Button {...args} disabled />
          </Stack>
          <Stack direction='column' gap={16} p={20} align='center' style={{ backgroundColor: colors.gray250 }}>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Stack key={key} direction='column' gap={4}>
                  <BaseText kind='Body_14_SemiBold'>{key}</BaseText>
                  <Button {...args} size={key as ButtonSize} />
                </Stack>
              ))}
            </Stack>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Button {...args} size={key as ButtonSize} key={key} disabled />
              ))}
            </Stack>
          </Stack>
        </Stack>
        <Stack direction='row' gap={12} align='center'>
          <Stack direction='column' gap={16} p={20} align='center'>
            <Button {...args} kind={outlined_kind} />
            <Button {...args} kind={outlined_kind} disabled />
          </Stack>
          <Stack direction='column' gap={16} p={20} align='center' style={{ backgroundColor: colors.gray250 }}>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Stack key={key} direction='column' gap={4}>
                  <BaseText kind='Body_14_SemiBold'>{key}</BaseText>
                  <Button {...args} kind={outlined_kind} size={key as ButtonSize} key={key} />
                </Stack>
              ))}
            </Stack>
            <Stack direction='row' gap={24} align='center'>
              {button_size_keys.map((key) => (
                <Button {...args} kind={outlined_kind} size={key as ButtonSize} key={key} disabled />
              ))}
            </Stack>
          </Stack>
        </Stack>
      </Stack>
    );
  },
  args: {
    kind: 'secondary',
    size: 'medium',
    children: '버튼'
  }
}
```

### Start Icon

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    return (
      <>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='primary' size={key as ButtonSize} key={key} />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} size={key as ButtonSize} key={key} />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='black' size={key as ButtonSize} key={key} />
          ))}
        </Stack>
      </>
    );
  },
  args: {
    children: '버튼',
    startIcon: <IconCirclePlus size={14} />
  }
}
```

### Start Icon With Color

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    return (
      <>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='primary' size={key as ButtonSize} key={key} />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} size={key as ButtonSize} key={key} />
          ))}
        </Stack>
        <Stack direction='row' gap={24} p={10} align='center'>
          {button_size_keys.map((key) => (
            <Button {...args} kind='black' size={key as ButtonSize} key={key} />
          ))}
        </Stack>
      </>
    );
  },
  args: {
    children: '버튼',
    startIcon: <IconCircleMinusFill size={14} color={semantic_colors.state.negative} />
  }
}
```