How to create a toast notification with Alpine.js

Today I’ll show how to create a piece of UI that comes up very often when we want to communicate the result of an action to the user: toast notifications! For those who don’t know, this is supposed to be a small message bubble/dialog that shows up for a few moments and go away and it’s commonly used to show the user the result of an action like an Ajax request. Like in other Alpine.js tutorials, we will use TailwindCSS to style it, so here’s the basic markup:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine Toast Notification</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=“stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
    <div x-data="toastNotification()"></div>
    <script>
        function toastNotification() {
            return {}
        }
  </script>
<body>

You probably noticed that this time we will manage Alpine.js from the script tag instead of doing it inline like we did previously. This is because we want to add a little more functionality to it and doing it inline would be a mess.

So, the idea is to have a small dialog that slides up from the bottom right corner of the screen and then slides down after a few seconds. The title, the message and the color will be customizable and we also need something to trigger it. I’ll just create a button for now, but you’ll see that you can improve it and use it in an Ajax request easily. Here’s the markup for the button:

<button x-on:click=“openToast()” class=“bg-purple-200 hover:bg-purple-300 text-purple-500 rounded px-6 py-4 m-4”>Open Toast</button>

With this, we know that we will need an openToast inside our toastNotification object which will be called when clicking the button (x-on:click). If you are using it with Ajax, you would call this function after the request was finished.

The toast notification itself will have this markup:

<div
    x-show="open"
    class="w-96 p-4 rounded h-32 fixed bottom-4 right-4 transform-gpu transition-transform duration-400 ease"
    x-class="success ? 'bg-green-500' : 'bg-red-500'"
    x-transition:enter-start="translate-y-full"
    x-transition:enter-end="translate-y-0"
    x-transition:leave-start="translate-y-0"
    x-transition:leave-end="translate-y-full"
    >
    <p class="text-white"><strong x-text="title"></strong></p>
    <p class="mt-2 text-sm text-white" x-text="message"></p>
</div>

Remember that the notification and the button markup must go inside the div that declares x-data="toastNotification()" otherwise it won’t work.

Let’s go step by step:

x-show="open": This means that we will need a variable called open which will be a boolean and when it's true, the notification is open, and when it's false the notification will be closed.

There's nothing too interesting about the classes, but notice that we're using fixed which positions the div fixed in relation to the viewport. Then we use bottom-4 and right-4 to make it stick to the bottom right of the screen with a little margin. We also define a dynamic class using x-class: if a boolean variable called success is true, then it will be a green notification, otherwise it will be red.

Next, we use x-transition to declare that the toast will slide up when opening and slide down when closing.

Finally, we have two p tags that represent the notification title and the message. Both use variables to define those attributes and they are injected into the tags using x-text.

Now we can go back to our toastNotification function and defined all of these variables and functions.

function toastNotification() {
    return {
        open: false,
        title: "Toast Title",
        message: "Toast message",
        success: false,
        openToast() {
            this.open = true
            setTimeout(() => {
                this.open = false
            }, 5000)
        }
    }
}

We start with the boolean property that controls when the notificaation is open. Then we define the title and message strings which hold the data that is displayed by the notification. We then define the boolean success property which toggles the notification between green (true) and red (false). Finally we have the openToast function which sets the open property to true, opening the notification, and 5 seconds later it sets it back to false, effectivelly closing the notification.

And this is it. One could improve this little snippet by adding the possibility of changing the title, message and success properties on demand, for example after a successful update or after a failed Ajax request. Until the next post 👋

Blog

How to create a toast notification with Alpine.js

David Berri

Join Our Newsletter. No Spam, Only the good stuff.

Related