Alert

Displays a callout for user attention.

Default

Heads up!

You can add components to your app using the CLI.

Destructive

Error

Your session has expired. Please log in again.

Without Icon

Note

This is an alert without an icon. You can use it for simple messages.

With List

There were errors with your submission

Email address is required
Password must be at least 8 characters
Please accept the terms of service

Info Variants

Information

This is an informational message.

Success

Your changes have been saved successfully.

Warning

This action cannot be undone.

Usage

<twig:Alert>
    <twig:ux:icon name="lucide:terminal" />
    <h5 data-title>Heads up!</h5>
    <section>
        <p>You can add components to your app using the CLI.</p>
    </section>
</twig:Alert>

<twig:Alert variant="destructive">
    <twig:ux:icon name="lucide:circle-alert" />
    <h5 data-title>Error</h5>
    <section>
        <p>Something went wrong.</p>
    </section>
</twig:Alert>