# Component/Notification

> Props: component-notification.props.txt

## Examples


### Base

```tsx
{
  args: {
    title: 'Info Notification',
    content: 'Notification message',
    linkText: 'link',
    closeButton: true
  },
  render: args => {
    const notification = useNotification();
    const handleClick = (props: MessageOptions<NotificationComponentProps>) => {
      notification?.show({
        ...props
      });
    };
    return <Button onClick={() => handleClick({
      ...args
    })}>Notification Message</Button>;
  }
}
```

### Handle Event

```tsx
{
  render: () => {
    const notification = useNotification();
    return <Button onClick={() => notification?.show({
      id: 'notification-custom-id',
      title: 'Notification',
      content: 'Notification message',
      linkText: 'Link Text',
      confirmText: 'confirm',
      cancelText: 'dismiss',
      onConfirm: () => alert('onConfirm'),
      onCancel: () => alert('onCancel'),
      onClickLink: () => {
        alert('onClickLink');
        notification?.destroy('notification-custom-id');
      }
    })}>
        Notification Message
      </Button>;
  }
}
```

### Kind

```tsx
{
  args: {
    content: 'Notification message',
    confirmText: '확인',
    cancelText: '닫기',
    linkText: 'Link'
  },
  render: args => {
    const buttonKind: Record<NotificationKind, ButtonBaseKind> = {
      error: 'secondary',
      success: 'primary',
      info: 'black',
      warning: 'secondary'
    };
    const notification = useNotification();
    const handleClick = (props: MessageOptions<NotificationComponentProps>) => {
      notification?.show({
        ...props
      });
    };
    return <Stack direction='column' p={12}>
        <BaseText>Kind 확인을 위해 max_count 4로 허용합니다.</BaseText>
        <Stack direction='column' pt={16} gap={16} width={300}>
          {(['info', 'success', 'error', 'warning'] as NotificationKind[]).map(kind => {
          return <Button key={kind} kind={buttonKind[kind]} onClick={() => handleClick({
            ...args,
            ...{
              title: `${kind} Notification`,
              kind: kind as NotificationKind,
              max_count: 4
            }
          })}>
                {kind}
              </Button>;
        })}
        </Stack>
      </Stack>;
  }
}
```