render (h) {
    return h(CAlert, {
      props: {
        status: this.status,
        variant: this.variant,
        ...forwardProps(this.$props)
      },
      attrs: {
        textAlign: 'left',
        boxShadow: 'lg',
        rounded: 'md',
        alignItems: 'start',
        fontFamily: 'body',
        m: 2,
        pr: 2,
        p: 4,
        id: this.id,
        ...(this.$attrs || {}),
        'data-chakra-component': 'CToast'
      }
    }, [
      h(CAlertIcon),
      h(CBox, {
        props: {
          flex: '1'
        }
      }, [
        this.title && h(CAlertTitle, {}, this.title),
        this.description && h(CAlertDescription, {}, this.description)
      ]),
      this.isClosable && h(CCloseButton, {
        props: {
          size: 'sm'
        },
        attrs: {
          position: 'absolute',
          right: '4px',
          top: '4px',
          color: 'currentColor'
        },
        on: {
          click: this.onClose
        }
      })
    ])
  }
CToast component

the toast element component

@extends CAlert
@see Docs https://vue.chakra-ui.com/toast