v2.5.12
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 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.
<x-bladewind::alert>
Your subscription is expiring in 19 days.
<a href="#">Renew now</a>
</x-bladewind::alert>
<x-bladewind::alert
type="error">
You do not have permission to upload files
</x-bladewind::alert>
<x-bladewind::alert
type="warning">
Well, this is your first warning. Do that again and I'll wipe your hard disk
</x-bladewind::alert>
<x-bladewind::alert
type="success">
Files were successfully uploaded
</x-bladewind::alert>
You can set the shade="dark" attribute on the alert component to get darker colours.
<x-bladewind::alert
shade="dark">
Your subscription is expiring in 19 days.
<a href="#" class="!text-white/70">Renew now</a>
</x-bladewind::alert>
<x-bladewind::alert type="error" shade="dark">
You do not have permission to upload files
</x-bladewind::alert>
<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>
<x-bladewind::alert type="success" shade="dark">
Files were successfully uploaded
</x-bladewind::alert>
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.
<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>
<x-bladewind::alert
type="error"
shade="dark"
show_close_icon="false">
You do not have permission to upload files
</x-bladewind::alert>
<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>
Like most BladewindUI components, the Alert component can take on any of the colours defined in our palette. All colours work for both the
dark and faint shades
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
We saw earlier, the four prebuilt alerts had 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.
<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.
<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>
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.
<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.
<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>
BladewindUI defines the colours used for the four prebuilt alert types in the tailwind.config.js file. The properties defined are specified below.
To change the colours you will need to define the corresponding colors key and colour values in your project's tailwind.config.js.
...
theme: {
extend: {
colors: {
...
success: colors.emerald,
error: colors.red,
warning: colors.amber,
info: colors.blue
}
},
}
...
The table below shows a comprehensive list of all the attributes available for the Alert component.
| 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. |
<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>
resources > views > components > bladewind > alert.blade.php