# Component/Modal/AlertModal

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

## Examples


### Base

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

### Continuos Open

```tsx
{
  args: {
    title: 'Heading'
  },
  render: () => <div>
      <Button onClick={async () => {
      await Alert({
        kind: 'info',
        title: 'Heading',
        text: 'Body',
        confirmText: 'Label',
        onConfirm: () => {
          console.log('onConfirm');
        },
        onExited: () => {
          console.log('onExited');
        }
      });
      await Alert({
        kind: 'error',
        title: 'Heading2',
        text: 'Body2',
        confirmText: 'Label2',
        onConfirm: () => {
          console.log('onConfirm2');
        },
        onExited: () => {
          console.log('onExited2');
        }
      });
    }}>
        하나의 얼럿이 닫히고 다음 얼럿이 바로 열리는 상황
      </Button>
    </div>
}
```

### Dense

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

### Disabled Auto Focus Button

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

```tsx
{
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: 'Label',
    onConfirm: () => {
      console.log('onConfirm');
    },
    onExited: () => {
      console.log('onExited');
    },
    onClose: () => {
      console.log('onClose');
    }
  },
  render: args => <Button onClick={() => Alert({
    ...args
  })}>open</Button>,
  args: {
    title: 'Heading',
    text: 'Body',
    confirmText: '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={() => Alert({
        ...args,
        text: 'Body',
        kind: kind as AlertModalProps['kind']
      })}>
            alertModal - {kind}
          </Button>;
    })}
    </Stack>
}
```