v3.0.5
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.
You can set the shade="dark" attribute on the alert component to get darker colours.
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.
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.
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.
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.
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.
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.
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. |
resources > views > components > bladewind > alert.blade.php