Notification

Unlike the Alert component, the notification component is purely triggered via javascript. This is an intrusive way of displaying messages to your end users. The notification component comes with a helper function to trigger the notification. Notifications are usually triggered after a user action is performed. That said, it means most of the time content of notifications are built on the fly, so, it will not make sense to have a notification pre-filled with content waiting to be triggered.

Include the notification component anywhere on your page. This component does not allow for much dynamic customization.

                
                    <x-bladewind.notification />

Now you can trigger a notification using the javascript helper function. The function accepts four parameters listed below.

                
                    <script>
                        showNotification(title, message, type, dismiss_in);
                    </script>

Parameter	Required?	Description
title	optional	Title of the notification. This should usually be very brief
message	required	Meesage to display to the user in the body of the notification. This can either be brief or descriptive.
type	optional	Type of notification to be displayed. Default is success. Available values are `success` `info` `warning` `error`. The type determines the color of the notification and the icon to be displayed.
dismiss_in	optional	Numeric. In how many seconds should the notification be dismissed if the user does not explicitly click on the close button. Default is 10 seconds. Note the value is in seconds and not milliseconds. So 20 will mean 20 seconds.

                
                    <script>
                        showNotification('Delete Successful', 'Your downloaded file was deleted successfully');
                    </script>

                
                    <x-bladewind.button 
                        onclick="showNotification(
                            'Download Successful', 
                            'Your download completed successfully')">
                        success
                    </x-bladewind.button>  

                    <x-bladewind.button 
                        onclick="showNotification(
                            'Delete Failed', 
                            'Your message could not be deleted. Try again', 'error')">
                        error
                    </x-bladewind.button>  

                    <x-bladewind.button 
                        onclick="showNotification(
                            'Low Disk Space', 
                            `You have used 20gb of your 25gb storage space. <a href='#'>Upgrade soon</a>`, 'warning')">
                        warning
                    </x-bladewind.button>  

                    <x-bladewind.button 
                        onclick="showNotification(
                            'Invitation Accepted', 
                            `Samuel just accepted your invitation to join BladewindUI Inc. <a href='#'>Say Hello</a>`, 'info')">
                        info
                    </x-bladewind.button>

Only a single instance of the notification component is available per page. Notifications are not stacked. Triggering a new notification when one is already shown will overwrite the earlier notification.

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Notification component.

IMPORTANT: Projects running Laravel 8 please read this

Option	Default	Available Values
postion	top right	Defines where the notification should be displayed. Available values are `top right` `bottom right` `top left` `bottom left`

Notification with all attributes defined

                
                    <x-bladewind.notification position="top right" />

The source file for this component is available in resources > views > components > bladewind > notification.blade.php