# Component/Modal/ConfirmModal

> Props: component-modal-confirmmodal.props.txt

## Examples


### Auto Focus Button Custom

autoFocusButton 적용 기본 버튼을 변경할 수 있습니다.

```tsx
{
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    cancelText: 'Label',
    subtext: 'Subtext',
    onCancel: () => {
      console.log('onCancel');
    },
    onConfirm: () => {
      console.log('onConfirm');
    },
    onClose: () => {
      console.log('onClose');
    },
    onExited: () => {
      console.log('onExited');
    }
  },
  render: args => <Button onClick={() => Confirm({
    ...args
  })}>open</Button>,
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    cancelText: 'Label',
    autoFocusButton: 'cancel'
  },
  parameters: {
    docs: {
      description: {
        story: 'autoFocusButton 적용 기본 버튼을 변경할 수 있습니다.'
      }
    }
  }
}
```

### Base

```tsx
{
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    cancelText: 'Label',
    subtext: 'Subtext',
    onCancel: () => {
      console.log('onCancel');
    },
    onConfirm: () => {
      console.log('onConfirm');
    },
    onClose: () => {
      console.log('onClose');
    },
    onExited: () => {
      console.log('onExited');
    }
  },
  render: args => <Button onClick={() => Confirm({
    ...args
  })}>open</Button>
}
```

### Continuos Open

```tsx
{
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    onConfirm: () => {
      console.log('onConfirm');
    },
    onExited: () => {
      console.log('onExited');
    }
  },
  render: args => {
    const [opened, setOpened] = useState(false);
    useEffect(() => {
      if (opened) {
        Confirm({
          title: 'Heading2',
          text: 'Body2',
          confirmText: 'Label2',
          onConfirm: () => {
            console.log('onConfirm2');
          },
          onExited: () => {
            console.log('onExited2');
            setOpened(false);
          }
        });
      }
    }, [opened]);
    return <div>
        <Button onClick={async () => {
        await Confirm({
          ...args
        });
        setOpened(true);
      }}>
          하나의 컨펌이 닫히고 다음 컨펌이 바로 열리는 상황
        </Button>
      </div>;
  }
}
```

### Custom Props Button

ButtonProps 속성을 통해 Button의 색상 및 아이콘을 커스텀할 수 있습니다.

```tsx
{
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    cancelText: 'Label',
    subtext: 'Subtext',
    onCancel: () => {
      console.log('onCancel');
    },
    onConfirm: () => {
      console.log('onConfirm');
    },
    onClose: () => {
      console.log('onClose');
    },
    onExited: () => {
      console.log('onExited');
    }
  },
  render: args => <Button onClick={() => Confirm({
    ...args
  })}>open</Button>,
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    confirmButtonProps: {
      kind: 'negative'
    },
    cancelText: 'Label',
    cancelButtonProps: {
      startIcon: <IconColoredWarning />
    },
    autoFocusButton: null
  },
  parameters: {
    docs: {
      description: {
        story: 'ButtonProps 속성을 통해 Button의 색상 및 아이콘을 커스텀할 수 있습니다.'
      }
    }
  }
}
```

### Dense

```tsx
{
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    cancelText: 'Label',
    subtext: 'Subtext',
    onCancel: () => {
      console.log('onCancel');
    },
    onConfirm: () => {
      console.log('onConfirm');
    },
    onClose: () => {
      console.log('onClose');
    },
    onExited: () => {
      console.log('onExited');
    }
  },
  render: args => <Button onClick={() => Confirm({
    ...args
  })}>open</Button>,
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    cancelText: 'Label',
    dense: true
  }
}
```

### Disabled Auto Focus Button

autoFocusButton 미사용시 모달 마운트 이후 confirm 버튼에 자동 포커스가 되지 않습니다.

```tsx
{
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    cancelText: 'Label',
    subtext: 'Subtext',
    onCancel: () => {
      console.log('onCancel');
    },
    onConfirm: () => {
      console.log('onConfirm');
    },
    onClose: () => {
      console.log('onClose');
    },
    onExited: () => {
      console.log('onExited');
    }
  },
  render: args => <Button onClick={() => Confirm({
    ...args
  })}>open</Button>,
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    cancelText: 'Label',
    autoFocusButton: null
  },
  parameters: {
    docs: {
      description: {
        story: 'autoFocusButton 미사용시 모달 마운트 이후 confirm 버튼에 자동 포커스가 되지 않습니다.'
      }
    }
  }
}
```

### Kind

```tsx
{
  args: {
    title: 'Heading',
    text: 'Body',
    onConfirm: () => {
      console.log('onConfirm');
    },
    onExited: () => {
      console.log('onExited');
    }
  },
  render: args => <Stack direction='column' pt={16} gap={16} width={300}>
      {['success', 'error', 'warning'].map(kind => {
      return <Button key={kind} onClick={() => Confirm({
        ...args,
        kind: kind as ConfirmModalProps['kind']
      })}>
            ConfirmModal - {kind}
          </Button>;
    })}
    </Stack>
}
```