Toast component action

[officialankan]

Hi!

I was using the toast component a while back when it supported an action object as a parameter when triggered. It seems like this is now missing, but a remnant is still showing as a possible options object.

Are there any plans on implementing an action link in the toast component? Or is there now a different way of doing this? The screenshot below does not cause any typescript issues, but it does not render an action link in the toast.

[segunadebayo]

You can add it like so

// 2. Design the toast component
function Toast(props) {
  const machineProps = {
    ...props.toast,
    parent: props.parent,
    index: props.index,
  }
  const service = useMachine(toast.machine, machineProps)
  const api = toast.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      <h3 {...api.getTitleProps()}>{api.title}</h3>
      <p {...api.getDescriptionProps()}>{api.description}</p>
      <button onClick={api.dismiss}>Close</button>
      {props.toast.action && (
        <button
          onClick={() => {
            props.toast.action.onClick?.()
          }}
        >
          {props.toast.action.label}
        </button>
      )}
    </div>
  )
}