Alerts
EUIKit's alert component can be used to show an informational message. It supports Bulma's semantic types, and maps appropriate coloring for Tailwind CSS.
Like most of EUIKit's components, no default margins or size classes are applied to the alert, rather, any classes added to the alert will be honored. In this way, the alert can be sized appropriately based on the needs of the application.
type
| No | "info" | Type of alert. Can take any of the Colors and Types common to other EUIKit components. Defaults to "info" if not specified. |
lefticon
| No | depends on "type" |
Icon to place on the left side of the alert. The "warning", "success", and "error" types
include a default icon. To suppress this icon, use lefticon="none". The icon
will be rendered with the @svg() Blade directive, so any icon pack in
Blade Icons can be used.
EUIKit supports Heroicons by default.
|
righticon
| No | (none) |
Icon to place on the right side of the alert. By default, no icon is
used. The icon will be rendered with the @svg()
Blade directive, so any icon pack in Blade Icons can be used.
EUIKit supports Heroicons by default.
|
EUIKit Alert Component Examples
Default alert type "info"
<x-e::alert>Default alert type "info"</x-e::alert>
A "Warning" Alert Component.
<x-e::alert type="warning" class="w-2/3">A "Warning" Alert Component.</x-e::alert>
A "Success" Alert Component.
<x-e::alert type="success">A "Success" Alert Component.</x-e::alert>
An "Error" Alert Component.
<x-e::alert type="error" lefticon="none">An "Error" Alert Component.</x-e::alert>
A "Primary" Alert Component.
<x-e::alert type="primary">A "Primary" Alert Component.</x-e::alert>
A "Ghost" Alert Component.
<x-e::alert type="ghost" righticon="heroicon-o-arrow-left">A "Ghost" Alert Component.</x-e::alert>
A default Alert Component.
<x-e::alert lefticon="heroicon-o-building-office-2" righticon="heroicon-o-star">A default Alert Component.</x-e::alert>