Alert

Alert your users with a simple message. You can add icons, change the colour and border, adjust sizing, and enable dismissible functionality.

The alert component supports 9 different variants, each with its own color scheme and styling:

This is the default variant.

This is the dark variant.

This is the light variant.

This is the brand variant.

This is the primary variant.

This is the secondary variant.

This is the success variant.

This is the warning variant.

This is the danger variant.

<x-andach-alert>This is the <strong>default</strong> variant.</x-andach-alert>
<x-andach-alert variant="dark">This is the <strong>dark</strong> variant.</x-andach-alert>
<x-andach-alert variant="light">This is the <strong>light</strong> variant.</x-andach-alert>
<x-andach-alert variant="brand">This is the <strong>brand</strong> variant.</x-andach-alert>
<x-andach-alert variant="primary">This is the <strong>primary</strong> variant.</x-andach-alert>
<x-andach-alert variant="secondary">This is the <strong>secondary</strong> variant.</x-andach-alert>
<x-andach-alert variant="success">This is the <strong>success</strong> variant.</x-andach-alert>
<x-andach-alert variant="warning">This is the <strong>warning</strong> variant.</x-andach-alert>
<x-andach-alert variant="danger">This is the <strong>danger</strong> variant.</x-andach-alert>

Customisation

In addition to these unique variables, there are also generic arguments available for all components.

Attribute Name	Type	Default Value	Description
dismissible	bool	false	Adds a close button to the alert, allowing users to dismiss it.
icon	string	''	Adds an icon to the left side of the alert. Accepts full HTML string such as "<i class='fa-solid fa-mug-hot'></i>" which allows you to use any icon library (FontAwesome, Heroicons, etc.).
title	string	''	Adds a bold title to the alert, displayed above the main content.

Icons and Titles

Add visual context with icons and structured content with titles:

Account Created Successfully

Welcome to our platform! Your account has been created and verified.

Your session will expire in 5 minutes. Please save your work.

<x-andach-alert
    variant="success"
    title="Account Created Successfully"
    icon="<i class='fa-solid fa-user-check'></i>">
    Welcome to our platform! Your account has been created and verified.
</x-andach-alert>

<x-andach-alert
    variant="warning"
    icon="<i class='fa-solid fa-exclamation-triangle'></i>">
    Your session will expire in 5 minutes. Please save your work.
</x-andach-alert>

Dismissible Alerts

Allow users to close alerts when they're no longer needed:

Cookie Notice

We use cookies to enhance your browsing experience.

<x-andach-alert
    variant="primary"
    :dismissible="true"
    title="Cookie Notice"
    icon="<i class='fa-solid fa-cookie-bite'></i>">
    We use cookies to enhance your browsing experience.
</x-andach-alert>

Size Variations

Choose from five different sizes to match your design needs:

Extra small alert

Small alert

Base size alert (default)

Large alert

Extra large alert

<x-andach-alert size="xs" dismissible>Extra small alert</x-andach-alert>
<x-andach-alert size="sm" dismissible>Small alert</x-andach-alert>
<x-andach-alert size="base" dismissible>Base size alert (default)</x-andach-alert>
<x-andach-alert size="lg" dismissible>Large alert</x-andach-alert>
<x-andach-alert size="xl" dismissible>Extra large alert</x-andach-alert>

Attributes

Control styling with boolean attributes:

Alert without border

Alert with ring effect

Alert with shadow

Alert with square corners

<x-andach-alert variant="primary" :border="false">Alert without border</x-andach-alert>
<x-andach-alert variant="warning" :ring="true">Alert with ring effect</x-andach-alert>
<x-andach-alert variant="brand" :shadow="true">Alert with shadow</x-andach-alert>
<x-andach-alert variant="success" :rounded="false">Alert with square corners</x-andach-alert>