# Component/Toast

> Props: component-toast.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    const toast = useToast();
    const handleClick = (props: MessageOptions<ToastComponentProps>) => {
      toast?.show && toast.show({
        ...props
      });
    };
    return <Button onClick={() => handleClick({
      ...args
    })}>toast message</Button>;
  }
}
```

### Direction

```tsx
{
  render: args => {
    const direction: ToastDirection[] = ['column', 'column-reverse'];
    const toast = useToast();
    const handleClick = (props: MessageOptions<ToastComponentProps>) => {
      toast?.show && toast.show({
        ...props
      });
    };
    return <Stack direction='row' gap={16} p={12} align='center'>
        {direction.map(direction => {
        return <Stack direction='column' gap={12} align='center' key={direction}>
              <Button onClick={() => handleClick({
            ...args,
            ...{
              content: `${direction}`,
              position: 'bottom-center',
              direction
            }
          })}>
                {direction}
              </Button>
            </Stack>;
      })}
      </Stack>;
  }
}
```

### Handle Destroy

```tsx
{
  render: () => {
    const toast = useToast();
    return <Stack direction='row' gap={16}>
        <Button onClick={() => toast?.show && toast.show({
        id: 'toast-custom-id',
        content: 'Toast message'
      })}>
          Notification Message
        </Button>
        <Button onClick={() => toast?.destroy && toast.destroy('toast-custom-id')}>Destroy Toast</Button>
      </Stack>;
  }
}
```

### Inline

```tsx
{
  render: args => {
    const toast = useToast();
    const ref = useRef<HTMLDivElement>(null);
    const handleClick = (props: MessageOptions<ToastComponentProps>) => {
      toast?.show && toast.show({
        ...props,
        root: ref.current
      });
    };
    return <>
        <Button onClick={() => handleClick({
        ...args
      })}>toast message</Button>
        <Stack direction='row' ref={ref} style={{
        position: 'relative',
        zIndex: 0,
        backgroundColor: semantic_colors.state.positive
      }} width={500} height={300} />
      </>;
  }
}
```

### Kind

```tsx
{
  render: args => {
    const buttonKind: Record<ToastKind, ButtonBaseKind> = {
      error: 'secondary',
      success: 'primary',
      info: 'black'
    };
    const toast = useToast();
    const handleClick = (props: MessageOptions<ToastComponentProps>) => {
      toast?.show && toast.show({
        ...props
      });
    };
    return <Stack direction='row' p={12} gap={16}>
        {(['info', 'success', 'error'] as ToastKind[]).map(kind => {
        return <Stack direction='column' key={kind} gap={16}>
              <Button kind={buttonKind[kind]} onClick={() => handleClick({
            ...args,
            ...{
              content: `${kind} message`,
              size: 'medium',
              kind: kind as ToastKind
            }
          })}>
                {kind} - medium
              </Button>
              <Button kind={buttonKind[kind]} onClick={() => handleClick({
            ...args,
            ...{
              content: `${kind} message`,
              size: 'large',
              kind: kind as ToastKind
            }
          })}>
                {kind} - large
              </Button>
            </Stack>;
      })}
      </Stack>;
  }
}
```

### Position

```tsx
{
  render: args => {
    const position: ToastPositionType[] = ['top-right', 'top-center', 'bottom-right', 'bottom-center', 'center'];
    const toast = useToast();
    const handleClick = (props: MessageOptions<ToastComponentProps>) => {
      toast?.show && toast.show({
        ...props
      });
    };
    return <Stack direction='row' gap={16} p={12} align='center'>
        {position.map(position => {
        return <Stack direction='column' gap={12} align='center' key={position}>
              <Button onClick={() => handleClick({
            ...args,
            ...{
              content: `${position}`,
              position: position
            }
          })}>
                {position}
              </Button>
            </Stack>;
      })}
      </Stack>;
  }
}
```