BladewindUI
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.
<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>
If you are into darker colours, 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>
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
}
},
}
...
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 |
| 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"
class="rounded-lg shadow-sm">
Stay safe. Wash your hands for 20 seconds
</x-bladewind.alert>
resources > views > components > bladewind > alert.blade.php