Home
Amit Pachange
Snackbar with button

Snackbar with button

Show and close snackbar on button click with default timeout

This tailwind example is contributed by Amit Pachange, on 31-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Toast, Snackbar

Notification

Author Amit Pachange

9.8k

Fork Fullscreen

<button onclick="showSnackbar()" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Show Snackbar</button>

<div id="snackbar" class="bg-gray-900 text-white p-4 rounded-md fixed bottom-4 right-4 flex justify-between items-center" style="display: none;">
    Snackbar message!
    <button class="text-white" onclick="closeSnackbar()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
    </button>
</div>

function closeSnackbar() {
    var snackbar = document.getElementById("snackbar");
    snackbar.style.display = "none";
}
</script>

Related Examples

Toast
mensajes de alerta a los visitantes de su sitio web.

Author:
Code huit

1 year ago

14.6k
Closable toast message
show notification toast message at the bottom right corner

Author:
Prajwal Hallale

2 years ago

7.8k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

10.6k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

2 years ago

12.9k
Notification Badge

Author:
Mr Robot

2 years ago

9.8k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

10.3k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

2 weeks ago

59
Cookie consent dialog box

Author:
Leif99

2 years ago

13.9k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

4 months ago

501
Notification badges with count

Author:
Arya

2 years ago

13.9k
Subcribe Card - Alert - Notification

Author:
ABDO-SY

3 months ago

310
Toast
Fully Responsive Toast

Author:
AKASH GANDHAR

10 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components