# 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>;
  }
}
```

### Base

```tsx
{
  args: {
    variant: 'filled',
    color: 'secondary',
    size: 'medium',
    children: '버튼'
  }
}
```

### Destructive

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));

    return (
      <Stack direction='column'>
        {(['filled', 'outlined'] as const).map((variant) => (
          <Stack direction='row' gap={12} align='center' key={variant}>
            <Stack direction='column' gap={16} p={20} align='center'>
              <Button {...args} variant={variant} />
              <Button {...args} variant={variant} 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} variant={variant} size={key as ButtonSize} />
                  </Stack>
                ))}
              </Stack>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map((key) => (
                  <Button {...args} variant={variant} size={key as ButtonSize} key={key} disabled />
                ))}
              </Stack>
            </Stack>
          </Stack>
        ))}
      </Stack>
    );
  },
  args: {
    color: 'destructive',
    size: 'medium',
    children: '버튼',
    onClick: () => alert('clicked')
  }
}
```

### Disabled

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    const styles = [
      { variant: 'filled', color: 'primary' },
      { variant: 'outlined', color: 'secondary' },
      { variant: 'filled', color: 'emphasis' },
      { variant: 'outlined', color: 'destructive' },
    ] as const;

    return (
      <>
        {styles.map(({ variant, color }) => (
          <Stack direction='row' gap={24} p={10} align='center' key={`${variant}-${color}`}>
            {button_size_keys.map((key) => (
              <Button {...args} variant={variant} color={color} size={key as ButtonSize} key={key} disabled />
            ))}
          </Stack>
        ))}
      </>
    );
  },
  args: {
    children: '버튼',
    rightIcon: <IconCirclePlusFill size={14} />
  }
}
```

### Disabled With Color

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));
    const styles = [
      { variant: 'filled', color: 'primary' },
      { variant: 'outlined', color: 'secondary' },
      { variant: 'filled', color: 'emphasis' },
      { variant: 'outlined', color: 'destructive' },
    ] as const;

    return (
      <>
        {styles.map(({ variant, color }) => (
          <Stack direction='row' gap={24} p={10} align='center' key={`${variant}-${color}`}>
            {button_size_keys.map((key) => (
              <Button {...args} variant={variant} color={color} size={key as ButtonSize} key={key} disabled />
            ))}
          </Stack>
        ))}
      </>
    );
  },
  args: {
    children: '버튼',
    rightIcon: <IconCirclePlusFill size={14} color={semantic_colors.state.positive} />
  }
}
```

### Emphasis

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));

    return (
      <Stack direction='column'>
        {(['filled', 'outlined'] as const).map((variant) => (
          <Stack direction='row' gap={12} align='center' key={variant}>
            <Stack direction='column' gap={16} p={20} align='center'>
              <Button {...args} variant={variant} />
              <Button {...args} variant={variant} 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} variant={variant} size={key as ButtonSize} />
                  </Stack>
                ))}
              </Stack>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map((key) => (
                  <Button {...args} variant={variant} size={key as ButtonSize} key={key} disabled />
                ))}
              </Stack>
            </Stack>
          </Stack>
        ))}
      </Stack>
    );
  },
  args: {
    color: 'emphasis',
    size: 'medium',
    children: '버튼'
  }
}
```

### 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 color='primary'>버튼</Button>
          <Button color='secondary'>버튼</Button>
          <Button color='emphasis'>버튼</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,
    color: 'primary'
  }
}
```

### Left Icon

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));

    return (
      <>
        {(['primary', 'secondary', 'emphasis'] as const).map((color) => (
          <Stack direction='row' gap={24} p={10} align='center' key={color}>
            {button_size_keys.map((key) => (
              <Button {...args} color={color} size={key as ButtonSize} key={key} />
            ))}
          </Stack>
        ))}
      </>
    );
  },
  args: {
    children: '버튼',
    leftIcon: <IconCirclePlus size={14} />
  }
}
```

### Left Icon With Color

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));

    return (
      <>
        {(['primary', 'secondary', 'emphasis'] as const).map((color) => (
          <Stack direction='row' gap={24} p={10} align='center' key={color}>
            {button_size_keys.map((key) => (
              <Button {...args} color={color} size={key as ButtonSize} key={key} />
            ))}
          </Stack>
        ))}
      </>
    );
  },
  args: {
    children: '버튼',
    leftIcon: <IconCircleMinusFill size={14} color={semantic_colors.state.negative} />
  }
}
```

### Loading

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));

    return (
      <>
        {(['primary', 'secondary', 'emphasis'] as const).map((color) => (
          <Stack direction='row' gap={24} p={10} align='center' key={color}>
            {button_size_keys.map((key) => (
              <Button {...args} color={color} size={key as ButtonSize} key={key} />
            ))}
          </Stack>
        ))}
      </>
    );
  },
  args: {
    children: '엑셀 다운로드',
    loading: true,
    leftIcon: <IconExcel size={14} />,
    rightIcon: <IconDownload size={14} />
  }
}
```

### Primary

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));

    return (
      <Stack direction='column'>
        {(['filled', 'outlined'] as const).map((variant) => (
          <Stack direction='row' gap={12} align='center' key={variant}>
            <Stack direction='column' gap={16} p={20} align='center'>
              <Button {...args} variant={variant} />
              <Button {...args} variant={variant} 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} variant={variant} size={key as ButtonSize} />
                  </Stack>
                ))}
              </Stack>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map((key) => (
                  <Button {...args} variant={variant} size={key as ButtonSize} key={key} disabled />
                ))}
              </Stack>
            </Stack>
          </Stack>
        ))}
      </Stack>
    );
  },
  args: {
    color: 'primary',
    size: 'medium',
    children: '버튼'
  }
}
```

### Right Icon

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));

    return (
      <>
        {(['primary', 'secondary', 'emphasis'] as const).map((color) => (
          <Stack direction='row' gap={24} p={10} align='center' key={color}>
            {button_size_keys.map((key) => (
              <Button {...args} color={color} size={key as ButtonSize} key={key} />
            ))}
          </Stack>
        ))}
      </>
    );
  },
  args: {
    children: '버튼',
    rightIcon: <IconCirclePlus size={14} />
  }
}
```

### Right Icon With Color

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));

    return (
      <>
        {(['primary', 'secondary', 'emphasis'] as const).map((color) => (
          <Stack direction='row' gap={24} p={10} align='center' key={color}>
            {button_size_keys.map((key) => (
              <Button {...args} color={color} size={key as ButtonSize} key={key} />
            ))}
          </Stack>
        ))}
      </>
    );
  },
  args: {
    children: '버튼',
    rightIcon: <IconCirclePlusFill size={14} color={semantic_colors.state.positive} />
  }
}
```

### Secondary

```tsx
{
  render: (args) => {
    const button_size_keys = reverse(Object.keys(button_size_css));

    return (
      <Stack direction='column'>
        {(['filled', 'outlined'] as const).map((variant) => (
          <Stack direction='row' gap={12} align='center' key={variant}>
            <Stack direction='column' gap={16} p={20} align='center'>
              <Button {...args} variant={variant} />
              <Button {...args} variant={variant} 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} variant={variant} size={key as ButtonSize} />
                  </Stack>
                ))}
              </Stack>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map((key) => (
                  <Button {...args} variant={variant} size={key as ButtonSize} key={key} disabled />
                ))}
              </Stack>
            </Stack>
          </Stack>
        ))}
      </Stack>
    );
  },
  args: {
    color: 'secondary',
    size: 'medium',
    children: '버튼'
  }
}
```