# Component/Notification

> Props: component-notification.props.txt

## Examples


### Base

```tsx
{
  args: {
    title: 'Info Notification',
    content: 'Notification message',
    linkText: 'link',
    closable: 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>;
  }
}
```

### Status

```tsx
{
  args: {
    content: 'Notification message',
    confirmText: '확인',
    cancelText: '닫기',
    linkText: 'Link'
  },
  render: args => {
    const button_style: Record<NotificationStatus, {
      variant: ButtonVariant;
      color: ButtonColor;
    }> = {
      error: {
        variant: 'filled',
        color: 'secondary'
      },
      success: {
        variant: 'filled',
        color: 'primary'
      },
      info: {
        variant: 'filled',
        color: 'emphasis'
      },
      warning: {
        variant: 'filled',
        color: '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 NotificationStatus[]).map(status => {
          return <Button key={status} {...button_style[status]} onClick={() => handleClick({
            ...args,
            ...{
              title: `${status} Notification`,
              status,
              max_count: 4
            }
          })}>
                {status}
              </Button>;
        })}
        </Stack>
      </Stack>;
  }
}
```