0

my application is includes a Toast widget that notifies user when the query has been finished. I want to add custom icons, change the colour, add more drop-shadow, and change the font type.

I was unable to find anything within the documentation or in the UI in terms of custom styling. Wanted to see if there's a global class name that I can use to apply to the widget?

James Z
  • 12,209
  • 10
  • 24
  • 44
Mihir
  • 982
  • 1
  • 7
  • 13

1 Answers1

1

How’s it going, happy to help out here! You can customize your toast widget through classNames. Although toast widgets do not support custom classNames yet, you globally override the css className that determine the toasts styling.

For the toast container you can use the pt-toast class:

.pt-toast{
  // customs styles here
  box-shadow: none
}

For the toast message box you can use the pt-toast-message class:

.pt-toast-message {
  // customs styles here
}
Mihir
  • 982
  • 1
  • 7
  • 13