javascript - How to apply the minimal theme in sweetalert2? - Stack Overflow

I am trying to apply minimal theme of sweetalert2. But it is not working. This I put in the head -

<link href="/[email protected]/dist/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="/@sweetalert2/theme-minimal/minimal.css">

and this I put before the end of body tag -

<script src="/[email protected]/dist/sweetalert2.all.min.js"></script>

I used this code -

if (document.getElementById("fname").value == "") {
            Swal.fire({
            title: "Error!",
            text: "Please enter your name!",
            icon: "error",
            theme: "minimal"
            });
            return false;
}

I want the alert to look smaller like this -

How do I achieve this?

I am trying to apply minimal theme of sweetalert2. But it is not working. This I put in the head -

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-minimal/minimal.css">

and this I put before the end of body tag -

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>

I used this code -

if (document.getElementById("fname").value == "") {
            Swal.fire({
            title: "Error!",
            text: "Please enter your name!",
            icon: "error",
            theme: "minimal"
            });
            return false;
}

I want the alert to look smaller like this -

How do I achieve this?

• javascript
• html
• sweetalert2

Share Improve this question Follow edited Jan 29 at 16:12 Boidurja Talukdar asked Jan 29 at 14:46 Boidurja TalukdarBoidurja Talukdar 69633 gold badges2525 silver badges4949 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

There is no theme option on fire.

You just need to import the minimal theme css and the javascript itself:

Swal.fire({
    title: "Success!",
    text: "Record added/updated successfully.",
    icon: "success",
    width: '350px' // Custom width
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-minimal/minimal.css">

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

You can define a customClass in sweet alert to add style in dialog and make it smaller as shown here.

//This is default Sweet Alert Dialog
document.getElementById("defaultAlert").addEventListener("click", function() {
  if (document.getElementById("fname").value == "") {
    Swal.fire({
      title: "Error!",
      text: "Please enter your name!",
      icon: "error",
      theme: "minimal"
    });
    return false;
  }
});


//After adding custom class
document.getElementById("withCustomStyle").addEventListener("click", function() {
  if (document.getElementById("fname").value == "") {
    Swal.fire({
      title: "Error!",
      text: "Please enter your name!",
      icon: "error",
      customClass: 'customDialog'
    });
    return false;
  }
});

.customDialog{
    font-size:8px !important;
    width:250px !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-minimal/minimal.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

<input type="text" id="fname" placeholder="Enter your name">
<button id="defaultAlert">Default Alert</button>
<button id="withCustomStyle">Custom Alert</button>