Skip to content
Branch: master
Find file History
semantic-release-bot chore(release): 3.1.0 [skip ci]
# [3.1.0](v3.0.7...v3.1.0) (2019-12-10)

### Features

* add WordPress admin theme ([#47](#47)) ([84263a1](84263a1))
Latest commit 3a9b486 Dec 10, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information. feat: add WordPress admin theme (#47) Dec 10, 2019
animations.scss feat: add WordPress admin theme (#47) Dec 10, 2019
package.json chore(release): 3.1.0 [skip ci] Dec 10, 2019
wordpress-admin.scss feat: add WordPress admin theme (#47) Dec 10, 2019

Wordpress-admin Theme for SweetAlert2

npm version


npm install --save sweetalert2 @sweetalert2/theme-wordpress-admin


With CSS:

<!-- Include the Wordpress-admin theme -->
<link rel="stylesheet" href="@sweetalert2/theme-wordpress-admin/wordpress-admin.css">

<script src="sweetalert2/dist/sweetalert2.min.js"></script>

With SASS:


import Swal from 'sweetalert2/src/sweetalert2.js'


@import '~@sweetalert2/theme-wordpress-admin/wordpress-admin.scss';


To more closely match the WordPress style toast messages, use the following to get started:

const notify = Swal.mixin({
  toast: true,
  position: 'bottom-start',
  showConfirmButton: false,
  timer: 6000,
  onBeforeOpen: (toast) => {
    // Offset the toast message based on the admin menu size
    var dir = 'rtl' === document.dir ? 'right' : 'left'[dir] = document.getElementById('adminmenu').offsetWidth + 'px'

Further, when using icons you may wish to use WordPress Dashicons.{
  icon: 'success',
  iconHtml: '<div class="dashicons dashicons-yes" style="transform: scale(3);"></div>',
  title: 'Settings updated.',

Using modals as another example, you can add the Dashicon's megaphone icon.{
  title: 'Hey, we have something to say!',
  confirmButtonText: 'Let\'s do this',
  showCancelButton: false,
  icon: 'info',
  iconHtml: '<div class="dashicons dashicons-megaphone" style="transform: scale(3.5);"></div>',
  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.'

If you would like to use this theme outside of the WordPress admin area, you might want to set the font-family to use the font WordPress uses:

.swal2-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
You can’t perform that action at this time.