Messages
The <x-euikit::message> component can be
used to display a small informational message. The content of the message is defined
within the default slot. It takes the following attributes:
type
| No | "info" | Type of message. Can take any of the Colors and Types common to other EUIKit components. Defaults to "info" if not specified. |
lefticon
| No | (none) |
Icon to place on the left side of the message. 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.
|
righticon
| No | (none) |
Icon to place on the right side of the message. 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.
|
border
| No | FALSE (not present) | If this attribute is present, a rounded border will be applied to the message. |
inline
| No | FALSE (not present) | If this attribute is present, the message will appear inline within the text around it. |
route
| No | (none) |
Route to redirect to if this message is clicked. Useful when type="link", but can be used with any type. The
presense of this attribute will render the message as an <a /> tag instead of a <span />.
|
Message vs. Alert
While the Alert and Message
components are similar, they serve different functions. Use an alert component when you need to display longer passages of text, or if the
text is particularly important. Alerts are rendered larger and are meant to be more visible,
highlighting them more than a message. The message
component is rendered more subtly, without borders (by default), at a smaller size, and can be
rendered inline.
Message Examples
<x-e::message>This is the standard message, with no attributes.</x-e::message>
<x-e::message type="light" lefticon="heroicon-o-cube-transparent">Light message, with left icon</x-e::message>
<x-e::message type="dark">Dark message</x-e::message>
<x-e::message type="link" route="https://github.com/eafarris">Link message with route</x-e::message>
<x-e::message type="info">Info message</x-e::message>
<x-e::message type="success" border>Success message, with border</x-e::message>
<x-e::message type="warning">Warning message</x-e::message>
<x-e::message type="error">Error message</x-e::message>
<x-e::message type="primary" >Primary message</x-e::message>
<x-e::message type="ghost">Ghost message</x-e::message>
This is a paragraph with an inline message within it.
<p>
This is a paragraph with an <x-e::message type="primary"
lefticon="heroicon-o-star" righticon="heroicon-o-star" inline>inline
message</x-e::message> within it.
</p>