Slide Notification

Slide-in notifications with variants and auto-hide.

← Back to components GitHub Repo Playground

Notification Types

Click the buttons to show different notification types.

showSlideNotification({ type: 'success', title: 'Success!', message: 'Done.' });

Custom Duration

Control how long the notification stays visible.

showSlideNotification({ message: 'Quick!', timetohide: 1000 });

Custom Background

Use any color or gradient.

showSlideNotification({
  message: 'Gradient!',
  backgroundColor: 'linear-gradient(135deg, #8b5cf6, #ec4899)'
});

Persistent (click to close)

This notification stays until you click on it.

showSlideNotification({ message: 'Click me!', persistent: true });

Manual Control

Use declarative element with show()/hide() methods.

<slide-notification id="n" title="Hello" message="..." persistent></slide-notification>
<button onclick="n.show()">Show</button>
<button onclick="n.hide()">Hide</button>