bladewindUI

Alert

The alert component is useful for displaying messages intended to get the attention of your end users. BladewindUI alerts are in two variants. Dark alerts and faint alerts. Dark here is not to be confused with dark mode. This just provides a darker shade of the colour used, depending on what type of alert is displayed.

BladewindUI alerts are displayed inline by default. You may want to check out the Notification component if you want something more intrusive. For each colour shade there are four alert types, info error warning and success.

Faint Coloured Alerts

Info

Your subscription is expiring in 19 days. Renew now

                    
                        <x-bladewind.alert>
                            Your subscription is expiring in 19 days. 
                            <a href="#">Renew now</a>
                        </x-bladewind.alert>
                    
                

 

Error

You do not have permission to upload files

                    
                        <x-bladewind.alert 
                            type="error">
                            You do not have permission to upload files
                        </x-bladewind.alert>
                    
                

 

Warning

Well, this is your first warning. Do that again and I'll wipe your hard disk

                
                    <x-bladewind.alert 
                        type="warning">
                        Well, this is your first warning. Do that again and I'll wipe your hard disk
                    </x-bladewind.alert>
                
            

 

Success

Files were successfully uploaded

                
                    <x-bladewind.alert 
                        type="success">
                        Files were successfully uploaded
                    </x-bladewind.alert>
                
            

 

Dark Coloured Alerts

If you are into darker colours, you can set the shade="dark" attribute on the alert component to get darker colours.

Info

Your subscription is expiring in 19 days. Renew now

                
                    <x-bladewind.alert 
                        shade="dark">
                        Your subscription is expiring in 19 days. 
                        <a href="#" class="!text-white/70">Renew now</a>
                    </x-bladewind.alert>
                
            

 

Error

You do not have permission to upload files

                
                    <x-bladewind.alert type="error" shade="dark">
                        You do not have permission to upload files
                    </x-bladewind.alert>
                
            

 

Warning

Well, this is your first warning. Do that again and I'll wipe your hard disk

                
                    <x-bladewind.alert type="warning" shade="dark">
                        Well, this is your first warning. Do that again and I'll wipe your hard disk
                    </x-bladewind.alert>
                
            

 

Success

Files were successfully uploaded

                
                    <x-bladewind.alert type="success" shade="dark">
                        Files were successfully uploaded
                    </x-bladewind.alert>
                
            

 

Without Icons

By default the alert component shows a close icon and another icon that matches the type of alert being displayed. Both icons can be turned off separately.

Info

Your subscription is expiring in 19 days. Renew now

                
                    <x-bladewind.alert 
                        shade="dark"
                        show_icon="false"
                        show_close_icon="false">
                        Your subscription is expiring in 19 days. 
                        <a href="#" class="!text-white/70">Renew now</a>
                    </x-bladewind.alert>
                
            

 

Error

You do not have permission to upload files

                
                    <x-bladewind.alert 
                        type="error" 
                        shade="dark"
                        show_close_icon="false">
                        You do not have permission to upload files
                    </x-bladewind.alert>
                
            

 

Warning

Well, this is your first warning. Do that again and I'll wipe your hard disk

                
                    <x-bladewind.alert 
                        type="warning" 
                        shade="dark"
                        show_icon="false">
                        Well, this is your first warning. 
                        Do that again and I'll wipe your hard disk
                    </x-bladewind.alert>
                
            

 

Full List Of Attributes

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

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
type info info error warning success
shade faint faint dark
show_close_icon true Determines if the close icon should be shown. Value needs to be set as a string not boolean.
true false
show_icon true Determines if the alert type icon should be displayed. Value needs to be set as a string not boolean.
true false
css blank Any additonal css classes can be added using this attribute. For example to make your alert rounded you can add class="rounded-lg" for example. The default is an empty string.

 

Alert with all attributes defined

                
                    <x-bladewind.alert 
                        type="warning" 
                        shade="dark"
                        show_close_icon="false"
                        show_icon="false"
                        class="rounded-lg shadow-sm">
                        Stay safe. Wash your hands for 20 seconds
                    </x-bladewind.alert>
                
            

 

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