logo
v2.4.5

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>
        
    

Customizing Alert Colors

BladewindUI defines the colours used for this component in the tailwind.config.js file. The properties defined are specified below.

        
...
  theme: {
    extend: {
      colors: {
        ...
        success: colors.emerald,
        error: colors.red,
        warning: colors.amber,
        info: colors.blue
      }
    },
  }
...
        
    

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 Specifies if the close icon should be shown. Value needs to be set as a string not boolean.
true false
show_icon true Specifies if the alert type icon should be displayed. Value needs to be set as a string not boolean.
true false
class 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