All you'll need

Use the color attribute to better convey what your message is about. The only values applicable to alerts are primary (FlyonUI only), info, success, warning and error.
While you are at it, the variant attribute can be used to create soft, outline or dash-styled alerts. This is useful if you want to e.g. apply a different alert style to errors shown when form fields are filled incorrectly or to toast messages.

Information Please read the policy. These can be configured in Settings.

<x-alert color="info" title="Information">
  Please read the <a href="#" class="link font-semibold">policy</a>. These can be configured in Settings.
</x-alert>
<x-alert color="info" title="Information" variant="soft">
  Please read the <a href="#" class="link font-semibold">policy</a>. These can be configured in Settings.
</x-alert>
<x-alert color="info" title="Information" variant="outline">
  Please read the <a href="#" class="link font-semibold">policy</a>. These can be configured in Settings.
</x-alert>
<x-alert color="info" title="Information" variant="dash">
  Please read the <a href="#" class="link font-semibold">policy</a>. These can be configured in Settings.
</x-alert>

Alternatively, the type attribute can be used to apply a color and a default icon at the same time. Here is a complete set of alerts.

Default Alert with no styling.

Default Soft alert.

Default Outline-styled alert.

Default Dash-styled alert.

Primary (FlyonUI only) Primary with no styling.

Primary (FlyonUI only) Soft primary.

Primary (FlyonUI only) Outline-style primary.

Primary (FlyonUI only) Dash-style primary.

Information Info with no styling.

Information Soft info.

Information Outline-style info.

Information Dash-style info.

Success Success with no styling.

Success Soft success.

Success Outline-styled success.

Success Dash-styled success.

Warning Warning with no styling.

Warning Soft warning.

Warning Outline-styled warning.

Warning Dash-styled warning.

Error Error with no styling.

Error Soft error.

Error Outline-styled error.

Error Dash-styled error.

<!-- Default type -->
<x-alert title="Default" description="Alert with no styling."/>
<x-alert title="Default" description="Soft alert."           variant="soft"/>
<x-alert title="Default" description="Outline-styled alert." variant="outline"/>
<x-alert title="Default" description="Dash-styled alert."    variant="dash"/>

<!-- Primary type -->
<x-alert type="primary" title="Primary (FlyonUI only)" description="Primary with no styling."/>
<x-alert type="primary" title="Primary (FlyonUI only)" description="Soft primary."          variant="soft"/>
<x-alert type="primary" title="Primary (FlyonUI only)" description="Outline-style primary." variant="outline"/>
<x-alert type="primary" title="Primary (FlyonUI only)" description="Dash-style primary."    variant="dash"/>

<!-- Info type -->
<x-alert type="info" title="Information" description="Info with no styling."/>
<x-alert type="info" title="Information" description="Soft info."          variant="soft"/>
<x-alert type="info" title="Information" description="Outline-style info." variant="outline"/>
<x-alert type="info" title="Information" description="Dash-style info."    variant="dash"/>

<!-- Success type -->
<x-alert type="success" title="Success" description="Success with no styling."/>
<x-alert type="success" title="Success" description="Soft success."           variant="soft"/>
<x-alert type="success" title="Success" description="Outline-styled success." variant="outline"/>
<x-alert type="success" title="Success" description="Dash-styled success."    variant="dash"/>

<!-- Warning type -->
<x-alert type="warning" title="Warning" description="Warning with no styling."/>
<x-alert type="warning" title="Warning" description="Soft warning."           variant="soft"/>
<x-alert type="warning" title="Warning" description="Outline-styled warning." variant="outline"/>
<x-alert type="warning" title="Warning" description="Dash-styled warning."    variant="dash"/>

<!-- Error type -->
<x-alert type="error" title="Error" description="Error with no styling."/>
<x-alert type="error" title="Error" description="Soft error."           variant="soft"/>
<x-alert type="error" title="Error" description="Outline-styled error." variant="outline"/>
<x-alert type="error" title="Error" description="Dash-styled error."    variant="dash"/>

Soft, outlined and dash-styled alerts produce text with lower contrast, which may cause accessibility issues for the visually impaired (See MDN article about contrast).
Avoiding this issue may require to avoid using all alert styles, such as:

Use only no style alerts set on them but tweak your themes' colors to make them appear softer, though not so soft to have a contrast issue.
Use only soft, outline or dash styles but tweak the background colors to stay keep and adequate contrast.

#Icons

Icons, including the ones added by the type attribute, can be overriding by specifying the icon attribute of the alert.

An alert with a bell icon.

<x-alert style="soft" type="info" icon="heroicon-o-bell-alert">
  An alert with a bell icon.
</x-alert>

It is also possible to fill the <x-slot:icon> element, instead of the attribute, to further customize the behavior. In the example below, the icon changes colors when hovering the alert.

An alert with a bell icon.

<x-alert style="soft" type="info" class="group">
  <x-slot:icon>
	<x-icon name="heroicon-o-bell-alert" class="size-6 group-hover:text-secondary duration-250"/>
  </x-slot:icon>
  An alert with a bell icon.
</x-alert>

If you coded your alert with the type attribute (and its default icon), setting the icon to empty removes it.

An alert without an icon.

<x-alert type="" style="soft">
  An alert without an icon.
</x-alert>

#Actions

The actions slot can be used to add buttons to the alert.
Buttons added there will be small by default but their size can be restored using one of the btn-<size> utility classes, as demonstrated below.

Information Please read the policy. These can be configured in Settings.

<x-alert type="info" title="Information">
  Please read the <a href="#" class="link font-semibold">policy</a>. These can be configured in Settings.
  <x-slot:actions class="flex gap-2">
    <x-button class="shadow-none">Ok</x-button>
    <x-button class="btn-outline">Cancel</x-button>
  </x-slot:actions>
</x-alert>

<x-alert type="info" title="Information">
  Please read the <a href="#" class="link font-semibold">policy</a>. These can be configured in Settings.
  <x-slot:actions class="flex gap-2 *:btn-md">
    <x-button class="shadow-none">Ok</x-button>
    <x-button class="btn-outline">Cancel</x-button>
  </x-slot:actions>
</x-alert>

<x-alert type="info" title="Information">
  Please read the <a href="#" class="link font-semibold">policy</a>. These can be configured in Settings.
  <x-slot:actions class="flex gap-2">
    <x-button class="btn-md shadow-none">Ok</x-button>
    <x-button class="btn-outline">Cancel</x-button>
  </x-slot:actions>
</x-alert>

Alert

#Variants

#Icons

#Actions