Toast

() => {
  const toasts = useToasts()
  return (
    <Button
      onClick={() => {
        if (toasts && toasts.current) {
          toasts.current.message({
            text: 'The Evil Rabbit jumped over the fence.'
          })
        }
      }}
    >
      Show Toast
    </Button>
  )
}

() => {
  const toasts = useToasts()
  return (
    <Button
      onClick={() => {
        if (toasts && toasts.current) {
          toasts.current.message({
            text: 'The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence.'
          })
        }
      }}
    >
      Show Toast
    </Button>
  )
}

() => {
  const toasts = useToasts()
  return (
    <Button
      onClick={() => {
        if (toasts && toasts.current) {
          toasts.current.message({
            text: 'The Evil Rabbit jumped over the fence.',
            preserve: true
          })
        }
      }}
    >
      Show Toast
    </Button>
  )
}

() => {
  const toasts = useToasts()
  return (
    <Button
      onClick={() => {
        if (toasts && toasts.current) {
          toasts.current.message({
            text: 'The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence again.',
            action: 'Undo'
          })
        }
      }}
    >
      Show Toast
    </Button>
  )
}

() => {
  const toasts = useToasts()
  return (
    <Button
      onClick={() => {
        if (toasts && toasts.current) {
          toasts.current.message({
            text: 'The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence again.',
            action: 'Undo',
            cancelAction: 'Cancel'
          })
        }
      }}
    >
      Show Toast
    </Button>
  )
}

() => {
  const toasts = useToasts()
  return (
    <Button
      success
      onClick={() => {
        if (toasts && toasts.current) {
          toasts.current.success('The Evil Rabbit jumped over the fence.')
        }
      }}
    >
      Show Toast
    </Button>
  )
}

() => {
  const toasts = useToasts()
  return (
    <Button
      error
      onClick={() => {
        if (toasts && toasts.current) {
          toasts.current.error('The Evil Rabbit jumped over the fence.')
        }
      }}
    >
      Show Toast
    </Button>
  )
}