Materialize: different colors for different toasts

[nasr18]

I would like to show the toast like "Saved Successfully", "Please check your entry" and so on. for each information i wanna popup toast with different colors. For successfull message, toast color wanna be green, for error it should be red and so on.

[Kail0]

It's in the documentation - dialogs

Styling Toasts

Materialize.toast('I am a toast!', 3000, 'blue') 

'blue' is the class I'm applying to the toast for color

---

edit: few examples

HTML

  <a class="btn" onclick="Materialize.toast('I am a toast', 4000, 'blue')">Toast!</a>

jQuery

<a id="something" class="btn">Toast!</a>

$('#something').click(function(){
    Materialize.toast('I am a toast!', 3000, 'blue')
});

[nasr18]

thanks dude. i got it. but i also need 'rounded' class along with color class. how to do????

[sam-g-steel]

Materialize.toast('I am a toast!', 3000, 'blue rounded') 

Like @Kail0 mentioned... It's in the documentation - dialogs

[ragnarok22]

isn't in dialogs direction.

[SeloSlav]

Yeah a little blurb on color should be included in the documentation. It's not there currently. Also as far as I'm aware it doesn't look like you can pass hex values into it, but I suppose that's not a feature?

[NitroBAY]

I didn't understand, until I come across here, that we can customize the color of toasts.

[freddy-daniel]

I agree you can change colors.but how to set my custom color by HEX code like #3a4a61

[Dogfalo]

in your css file, you can define a class and then set this class in JS on the toast.

[freddy-daniel]

I already got it thanks man.

[Gnanam12]

can i use colours directly in my javascript helper class?

[Dogfalo]

No that will not work

[shunjid]

In Updated Version, It's something like:

M.toast({
html: 'Data updated Successfully',
classes: 'green darken-1 rounded'
});

[Jalkhov]

In Updated Version, It's something like:

M.toast({
html: 'Data updated Successfully',
classes: 'green darken-1 rounded'
});

Perfect

[Owolabi-Oluwatosin]

How can I add border: 2px blue solid; to the toast? I want the background-color to be white while the border color to be red or green depending on the type of message