logo
v2.8.0

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 a more attention-seeking alert. For each colour shade there are four prebuilt alert types: info error warning and success. These four prebuilt alerts are the commonly used types and come with their default icons. It is however, possible to use other colours and icons in your alerts.

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

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>
        
    

More Colours

Like most BladewindUI components, the Alert component can be displayed in any of the colours defined in our palette. All colours work for both the dark and faint shades.

Pink

I am a pink alert. How do I look?

I am a pink alert. Dark version. How do I look?

        
            <x-bladewind::alert color="pink">
                I am a pink alert. How do I look?
            </x-bladewind::alert>
        
    
        
            <x-bladewind::alert color="pink" shade="dark">
                I am a pink alert. Dark version. How do I look?
            </x-bladewind::alert>
        
    

Cyan

I am a cyan alert. How do I look?

I am a cyan alert. Dark version. How do I look?

        
            <x-bladewind::alert color="cyan">
                I am a cyan alert. How do I look?
            </x-bladewind::alert>
        
    
        
            <x-bladewind::alert color="cyan" shade="dark">
                I am a cyan alert. Dark version. How do I look?
            </x-bladewind::alert>
        
    

Purple

I am a purple alert. How do I look?

I am a purple alert. Dark version. How do I look?

        
            <x-bladewind::alert color="purple">
                I am a purple alert. How do I look?
            </x-bladewind::alert>
        
    
        
            <x-bladewind::alert color="purple" shade="dark">
                I am a purple alert. Dark version. How do I look?
            </x-bladewind::alert>
        
    

Gray

I am a gray alert. How do I look?

I am a gray alert. Dark version. How do I look?

        
            <x-bladewind::alert color="gray">
                I am a gray alert. How do I look?
            </x-bladewind::alert>
        
    
        
            <x-bladewind::alert color="gray" shade="dark">
                I am a gray alert. Dark version. How do I look?
            </x-bladewind::alert>
        
    

Violet

I am a violet alert. How do I look?

I am a violet alert. Dark version. How do I look?

        
            <x-bladewind::alert color="violet">
                I am a violet alert. How do I look?
            </x-bladewind::alert>
        
    
        
            <x-bladewind::alert color="violet" shade="dark">
                I am a violet alert. Dark version. How do I look?
            </x-bladewind::alert>
        
    

Indigo

I am a indigo alert. How do I look?

I am a indigo alert. Dark version. How do I look?

        
            <x-bladewind::alert color="indigo">
                I am a indigo alert. How do I look?
            </x-bladewind::alert>
        
    
        
            <x-bladewind::alert color="indigo" shade="dark">
                I am a indigo alert. Dark version. How do I look?
            </x-bladewind::alert>
        
    

Fuchsia

I am a fuchsia alert. How do I look?

I am a fuchsia alert. Dark version. How do I look?

        
            <x-bladewind::alert color="fuchsia">
                I am a fuchsia alert. How do I look?
            </x-bladewind::alert>
        
    
        
            <x-bladewind::alert color="fuchsia" shade="dark">
                I am a fuchsia alert. Dark version. How do I look?
            </x-bladewind::alert>
        
    

Orange

I am a orange alert. How do I look?

I am a orange alert. Dark version. How do I look?

        
            <x-bladewind::alert color="orange">
                I am a orange alert. How do I look?
            </x-bladewind::alert>
        
    
        
            <x-bladewind::alert color="orange" shade="dark">
                I am a orange alert. Dark version. How do I look?
            </x-bladewind::alert>
        
    

Transparent

I am a transparent alert. How do I look?

I am a transparent alert. Dark version. How do I look?

        
            <x-bladewind::alert color="transparent">
                I am a transparent alert. How do I look?
            </x-bladewind::alert>
        
    
        
            <x-bladewind::alert color="transparent" shade="dark">
                I am a transparent alert. Dark version. How do I look?
            </x-bladewind::alert>
        
    

Other Icons & Avatars

Icons

As seen above, the four prebuilt alerts (error, warning, info, success) have their corresponding icons. All other alerts do not have corresponding icons. You can display an icon by setting the icon attribute to any of the icon names on Heroicons.

No more alarm snoozing. Wake up!

Your BladewindUI subscription is expiring soon. Pay up!

        
            <x-bladewind::alert color="indigo" icon="bell-alert">
                No more alarm snoozing. Wake up
            </x-bladewind::alert>
        
    
        
            <x-bladewind::alert color="indigo" shade="dark"
                icon="currency-dollar">
                Your BladewindUI subscription is expiring soon. Pay up!
            </x-bladewind::alert>
        
    

If the default icon size does not suit your needs, you can modify the css of the icon by setting the icon_avatar_css attribute to your preferred TailwindCSS classes.

Subscription overdue
Your BladewindUI subscription is overdue by 3 months. Please pay before the 30th of this month to avoid losing your information.

        
            <x-bladewind::alert color="cyan" shade="dark"
                icon="currency-dollar"
                 icon_avatar_css="!h-16 !w-16 opacity-60">
                <div><strong>Subscription overdue</strong></div>
                Your BladewindUI subscription is overdue by 3 months. Please pay
                before the 30th of this month to avoid losing your information.
            </x-bladewind::alert>
        
    

Avatars

It is possible to use avatars instead of icons to spice the alerts up a bit. The avatar is displayed using the BladewindUI Avatar component.

/assets/images/issah.jpg
Jane has been added to your friends list

        
            <x-bladewind::alert color="violet" shade="dark"
                avatar="/assets/images/issah.jpg">
                Jane has been added to your friends list
            </x-bladewind::alert>
        
    

The default avatar size used in the alert is tiny. Other sizes are available here and can be changed by setting the size attribute of the component. This attribute will only take effect when using an avatar. You can also add additional css to the avatar by setting the icon_avatar_css attribute.

/assets/images/doc.png
New friend request
Jane C. Doe wants to connect as a friend in your professional network.
2 days ago

        
            <x-bladewind::alert color="cyan"
                shade="dark"
                avatar="/images/...jpg"
                size="big"
                show_ring="true">

                <div><strong>New friend request</strong></div>
                Jane C. Doe wants to connect as a friend in
                your professional network.
                <div class="text-sm opacity-70">2 days ago</div>

            </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 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
color blank Additional colours to pick from for the alert background..


primary blue red yellow greenpurple pink orange black cyan violet indigo fuchsia
icon blank Icon to display as a prefix to the alert message. Can be any ico name from Heroicons.
avatar blank Specify the url to an avatar. Uses the Avatar component to display an image as a prefix in the component..
icon_avatar_css blank Specify additional css to be applied to the avatar or icon prefix. Can be any TailwindCSS styles.
size tiny The size of the avatar. Sizes are inherited from the Avatar component.
show_ring false Determines if the avatar should display a ring around it.

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"
                color="pink"
                icon="briefcase"
                icon_avatar_css="bg-slate-800"
                show_ring="true"
                avatar="/assets/images/me.jpg"
                size="small"
                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