How to create a toast notification with Alpine.js
Tags: javascript, alpinejs, tailwindcss
Published: 2021-05-29 18:04:13

---
title: How to create a toast notification with Alpine.js
published: true
date: 2021-05-29 15:02:30 UTC
tags: javascript, alpinejs, tailwindcss
canonical_url: https://dberri.com/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
<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:

```html
<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:

```html
<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.

```javascript
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 👋