0.15 Notify with HTML

  • Thanks for explanation. Must have messed up something (don’t know what exactly)…, since now it works.

    I used to use rgba notation for the background (and have opacity feature this way), it seems not possible to set color using rgba notation with notify, correct (and why not…)?

  • Notify only supports colors from the quasar color palette

  • I noticed, and I miss rgba dearly.

  • I used the HTML property within Alert to bold the important part of the message, ala “Do you really want to delete <b>whatever</b>?”

  • @rstoenescu thanks for the feedback. But dialog doesn’t support HTML either anymore.
    And as mentioned above, I need to use HTML in alerts for emphasis.

  • Admin

  • To echo @jeffatef and @Nicholas, I also used the HTML property for emphasis on certain parts of the message. Although I also found it useful for adding hyperlinks within the notification text (I could add a button for this, but I believe a link would provide a better UI in my case). I understand the concerns about Javascript injection, but are there currently any alternative ways to implement these two capabilities into a notification?

  • To @jeffatef, @Nicholas, and anyone else looking to add emphasis to their alerts, here’s the workaround I’m using. Basically just modifying the DOM directly after the notification is created. I’m still fairly new to JS so there might be some downside here (aside from injection) that I’m missing, but it seems to work well.

    function createAlert(html, type) {
      // html: string, valid HTML to be used as the alert's text
      // type: string, choose 'positive', 'negative', 'warning', 'info'
      const alert = Notify.create({
        message: '', // text is updated later
        timeout: 0, // forces user to dismiss
        type: type,
        actions: [
            label: 'Dismiss',
      // use setTimeout(function, 0) to ensure element is created by the time we add HTML
      setTimeout(function () {
        // the div containing the text has no class or id, so we first get its parent
        // based on its classes
        const el = document.getElementsByClassName('q-alert-content col self-center')
        // then we update the html of the most recently added notification
        el[el.length - 1].firstChild.innerHTML = html
      }, 0);
      return alert

  • @mds1 Yikes! That’s certainly a nasty solution haha. I’ve decided to hold back from upgrading to 0.15 until these features and/or proper workarounds are documented (plus other bug fixes 😛 )

  • For the reasons mentioned above, html messages are not coming back. Maybe we’ll add a classes prop so you can further customize text, but that is about it. No more html as strings