Toast

Rendering a toast

You can call it with just a string, that will become the title.

                Render a toast
              

Or provide an object as the second argument with more options. These will override the options passed to <better-toaster> if you have provided any.

              
              Render a toast
            

Success

Renders a checkmark icon in front of the message.

                  Render a success toast
                

Error

Renders an error icon in front of the message.

                    Render a error toast
                  

Info

Renders an info icon in front of the message.

                    Render an info toast
                  

Warning

Renders a warning icon in front of the message.

                      Render a warning toast
                  

Loading

Renders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast.

                    Render a loading toast
                  

Action

Renders a primary button by passing a action object in the options, enabling customization of the button label and the onClick callback to run when the button is clicked.

                      Render a toast with an action
                    

By default, clicking the button closes the toast - call event.preventDefault() within the onClick handler to prevent this behavior.

Cancel

Renders a secondary button by passing a cancel object in the options, enabling customization of the button label and the onClick callback to run when the button is clicked.

                      Render a cancel toast
                    

By default, clicking the button closes the toast - call event.preventDefault() within the onClick handler to prevent this behavior.

Promise

Starts in a loading state and will update automatically after the promise resolves or fails. You can pass a function to the success/error messages to incorporate the result/error of the promise.

                      Render a promise toast
                    

Custom

You can pass a standalone component class as the first argument instead of a string to render a custom toast while maintaining default styling.

                      Render a custom toast
                    

Use inputs on the options object (second argument) for your component’s data. To access the toast id for programmatic dismiss, declare toastId using input() or @Input().

Headless

Use it to render an unstyled toast with a custom component while maintaining the functionality. This method receives the component as an argument, giving you access to all properties.

                      Render a headless toast
                    

Use inputs on the options object (second argument) for your component’s data. To access the toast id for programmatic dismiss, declare toastId using input() or @Input().

API Reference