Messages and Alerts

<x::message> | <x:alert:info> | <x:alert:warn> | <x:alert:error> | <x:alert:success

Property	Description
icon	Sets the Remix Icon name to use for the icon, e.g. arrow-down-circle-line
color	Sets the color of the message, for some styles the color is used for text, for others the background, e.g. amber-600.
ghost	Uses the color for text and border, background is transparent.
boxed	Boxes off the message with padding, uses color for background.

<x::message icon="arrow-down-circle-line">
    This is my message. I hope you receive it.
</x::message>

---

<x::message boxed icon="arrow-down-circle-line" class:="bg-stone-300 dark:bg-stone-800">
    This is my message. I hope you receive it.
</x::message>

---

<x::message ghost color="emerald">
    This is my message. I hope you receive it.
</x::message>

---

<x::message ghost class:="border-dashed">
    This is my message. I hope you receive it.
</x::message>

---

Using the alert component you can get specific variations base on your theme. For example:

<x:alert:info boxed>
    This is my message. I hope you receive it.
</x:alert:info>

<x:alert:warn ghost>
    This is my message. I hope you receive it.
</x:alert:warn>

<x:alert:error boxed>
    This is my message. I hope you receive it.
</x:alert:error>

<x:alert:success ghost>
    This is my message. I hope you receive it.
</x:alert:success>