Styling

Headless

No default styles + full control of the component. This is the recommended approach as people usually either use the defaults or go fully custom.

                      Render a headless toast
                    

Global styles

If you only need to make smaller changes like changing the background color, you can use the style option in the toastOptions input. This way, every toast will have the same styling.

<better-toaster
  [toastOptions]="{
    style: {
      background: 'red',
    },
  }"
/>

You can also use the same option to style a specific toast.

this.toaster.show('Hello, world!', {
  style: {
    background: 'green',
  },
});

Styling specific elements

The preferred way to style the toasts with classes is through the headless approach. However, if you only need to change a few things you can apply a class to each element within the toast using the classNames option in the toastOptions input. You will need to use !important in order to override the default styles.

<app-toaster
  [toastOptions]="{
    classNames: {
      toast: 'my-toast',
      message: 'my-toast-title',
      description: 'my-toast-description',
      closeButton: 'my-toast-close',
      actionButton: 'my-toast-action',
      cancelButton: 'my-toast-cancel'
    }
  }"
/>

This technique can also be used with Tailwind, but to make sure the styles are applied correctly, you need to mark them as !important.

<app-toaster
  [toastOptions]="{
    classNames: {
      toast: 'bg-red-500! text-white!',
    },
  }"
/>

You can also use the same option to style a specific element of a specific toast.

this.toaster.show('Hello, world!', {
  classNames: {
     message: 'my-toast-title',
  },
});