Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Swal.fire Alert attributes and stuff


Hi Sean and team

I love the feel of the Swal fire so I'm trying to make it a bit more customised as a standalone query (in place of the more clunky looking modals). I've checked your documentation here: https://preview.keenthemes.com/metronic/demo6/features/miscellaneous/sweetalert2.html, and here: https://preview.keenthemes.com/metronic8/demo1/documentation/general/sweetalert.html.

It doesn't appear to accept carriage returns (new lines) in the text data.

I've tried \n \r and </br>, and adding a new item in the Text array ['line 1 of text','line 2 of text']

None of these work, but I'm hopeful you can provide some guidance on a workaround.

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


You can achieve line breaks in SweetAlert2 (Swal.fire) by using HTML tags inside the text or html attribute. Since \n and <br> don’t work in text, try switching to html like this:

Swal.fire({
title: "Custom Alert",
html: "Line 1 of text<br>Line 2 of text",
icon: "info"
});


Alternatively, if you're dynamically adding text, make sure to replace \n with <br> before passing it into the html field.



Hey! SweetAlert2 is a fantastic choice for sleek and customizable alerts. Regarding your issue with new lines, you can achieve line breaks in the text property using template literals (backticks) or by setting html instead of text. Try this:

Swal.fire({ title: "Custom Alert", text: `Line 1 of text Line 2 of text`, });

Or using html:


Swal.fire({ title: "Custom Alert", html: "Line 1 of text<br>Line 2 of text", });
Hope this helps! By the way, if you're into mobile gaming, check out Cricket League MOD APK – a great resource for Cricket League fans!


Hi,

You can try to use HTML format, instead of text:


swal({ title: "hi", html: "First line<br>Second line" });


Regards.



All the best with your projects happy


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(