Alert

Display alert messages with different variants and optional icons.

Success! Your changes have been saved

This is an alert with icon, title and description.

Unable to process your payment.

Please verify your billing information and try again.

Check your card details
Ensure sufficient funds
Verify billing address

<div class="flex w-full max-w-xl flex-col gap-4">
    <twig:ui:Alert>
        <twig:ux:icon name="lucide:circle-check" />
        <twig:ui:Alert:Title>Success! Your changes have been saved</twig:ui:Alert:Title>
        <twig:ui:Alert:Description>This is an alert with icon, title and description.</twig:ui:Alert:Description>
    </twig:ui:Alert>
    <twig:ui:Alert variant="success">
        <twig:ux:icon name="lucide:circle-alert" />
        <twig:ui:Alert:Title>Unable to process your payment.</twig:ui:Alert:Title>
        <twig:ui:Alert:Description>
            <p>Please verify your billing information and try again.</p>
            <ul class="list-inside list-disc text-sm">
                <li>Check your card details</li>
                <li>Ensure sufficient funds</li>
                <li>Verify billing address</li>
            </ul>
        </twig:ui:Alert:Description>
    </twig:ui:Alert>
</div>

Usage

Place an optional <twig:ux:icon> as the first direct child of the alert; the layout reserves a column for it automatically.

Success! Your changes have been saved

This is an alert with icon, title and description.

<twig:ui:Alert class="max-w-xl">
    <twig:ux:icon name="lucide:circle-check" />
    <twig:ui:Alert:Title>Success! Your changes have been saved</twig:ui:Alert:Title>
    <twig:ui:Alert:Description>This is an alert with icon, title and description.</twig:ui:Alert:Description>
</twig:ui:Alert>

Examples

Without icon

The icon column collapses when no icon is present.

Heads up!

You can use the Alert component without an icon.

<twig:ui:Alert class="max-w-xl">
    <twig:ui:Alert:Title>Heads up!</twig:ui:Alert:Title>
    <twig:ui:Alert:Description>You can use the Alert component without an icon.</twig:ui:Alert:Description>
</twig:ui:Alert>

With action

Add the optional <twig:ui:Alert:Action> to place an action at the end of the alert, such as a button or a dismiss icon. When the alert is narrow, the action wraps below the text.

Dark mode is now available

Switch between light and dark themes in your settings.

<twig:ui:Alert class="max-w-xl">
    <twig:ui:Alert:Title>Dark mode is now available</twig:ui:Alert:Title>
    <twig:ui:Alert:Description>Switch between light and dark themes in your settings.</twig:ui:Alert:Description>
    <twig:ui:Alert:Action>
        <twig:ui:Button size="xs">Enable</twig:ui:Button>
    </twig:ui:Alert:Action>
</twig:ui:Alert>

Responsive

The action placement responds to the width of the alert itself, not the viewport. The same alert adapts when rendered in a narrow column, such as a sidebar or a split view.

Storage almost full

Free up space or upgrade your plan to keep syncing.

Storage almost full

Free up space or upgrade your plan to keep syncing.

<div class="flex w-full flex-col items-start gap-4">
    <twig:ui:Alert class="max-w-xl">
        <twig:ux:icon name="lucide:hard-drive" />
        <twig:ui:Alert:Title>Storage almost full</twig:ui:Alert:Title>
        <twig:ui:Alert:Description>Free up space or upgrade your plan to keep syncing.</twig:ui:Alert:Description>
        <twig:ui:Alert:Action>
            <twig:ui:Button variant="outline" size="xs">Upgrade</twig:ui:Button>
        </twig:ui:Alert:Action>
    </twig:ui:Alert>
    <twig:ui:Alert class="max-w-xs">
        <twig:ux:icon name="lucide:hard-drive" />
        <twig:ui:Alert:Title>Storage almost full</twig:ui:Alert:Title>
        <twig:ui:Alert:Description>Free up space or upgrade your plan to keep syncing.</twig:ui:Alert:Description>
        <twig:ui:Alert:Action>
            <twig:ui:Button variant="outline" size="xs">Upgrade</twig:ui:Button>
        </twig:ui:Alert:Action>
    </twig:ui:Alert>
</div>

With action below

Set :inline="false" on the action to always place it below the icon, title and description.

You have been invited to join the Design team

Accepting gives you access to all the team projects and boards.

<twig:ui:Alert class="max-w-xl">
    <twig:ux:icon name="lucide:users" />
    <twig:ui:Alert:Title>You have been invited to join the Design team</twig:ui:Alert:Title>
    <twig:ui:Alert:Description>Accepting gives you access to all the team projects and boards.</twig:ui:Alert:Description>
    <twig:ui:Alert:Action :inline="false">
        <twig:ui:Button size="xs">Accept</twig:ui:Button>
        <twig:ui:Button variant="outline" size="xs">Decline</twig:ui:Button>
    </twig:ui:Alert:Action>
</twig:ui:Alert>

Info

Use the info variant for neutral, informative messages.

A new version is available.

Refresh the page to load the latest updates.

<twig:ui:Alert variant="info" class="max-w-xl">
    <twig:ux:icon name="lucide:info" />
    <twig:ui:Alert:Title>A new version is available.</twig:ui:Alert:Title>
    <twig:ui:Alert:Description>Refresh the page to load the latest updates.</twig:ui:Alert:Description>
</twig:ui:Alert>

Success

Use the success variant to confirm that an operation completed.

Payment received.

A receipt has been sent to your email address.

<twig:ui:Alert variant="success" class="max-w-xl">
    <twig:ux:icon name="lucide:circle-check" />
    <twig:ui:Alert:Title>Payment received.</twig:ui:Alert:Title>
    <twig:ui:Alert:Description>A receipt has been sent to your email address.</twig:ui:Alert:Description>
</twig:ui:Alert>

Warning

Use the warning variant to draw attention to something that needs care.

Your subscription expires in 3 days.

Renew now to keep access to all features.

<twig:ui:Alert variant="warning" class="max-w-xl">
    <twig:ux:icon name="lucide:triangle-alert" />
    <twig:ui:Alert:Title>Your subscription expires in 3 days.</twig:ui:Alert:Title>
    <twig:ui:Alert:Description>Renew now to keep access to all features.</twig:ui:Alert:Description>
</twig:ui:Alert>

Danger

Use the danger variant for errors and failures.

Unable to process your payment.

Please verify your billing information and try again.

<twig:ui:Alert variant="danger" class="max-w-xl">
    <twig:ux:icon name="lucide:circle-alert" />
    <twig:ui:Alert:Title>Unable to process your payment.</twig:ui:Alert:Title>
    <twig:ui:Alert:Description>Please verify your billing information and try again.</twig:ui:Alert:Description>
</twig:ui:Alert>

Colors

The variant prop covers the common cases, but any Tailwind color works through the color prop, such as color="purple". The border, background, heading, text and icon all adapt automatically, in both light and dark mode.

Neutral

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

<div class="grid w-full max-w-3xl gap-3 sm:grid-cols-2">
    <twig:ui:Alert color="neutral">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Neutral</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="red">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Red</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="orange">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Orange</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="amber">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Amber</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="yellow">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Yellow</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="lime">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Lime</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="green">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Green</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="emerald">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Emerald</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="teal">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Teal</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="cyan">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Cyan</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="sky">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Sky</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="blue">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Blue</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="indigo">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Indigo</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="violet">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Violet</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="purple">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Purple</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="fuchsia">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Fuchsia</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="pink">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Pink</twig:ui:Alert:Title>
    </twig:ui:Alert>
    <twig:ui:Alert color="rose">
        <twig:ux:icon name="lucide:palette" />
        <twig:ui:Alert:Title>Rose</twig:ui:Alert:Title>
    </twig:ui:Alert>
</div>

RTL

Set dir="rtl" on the root to render the alert for right-to-left languages. The default styles use logical properties, so the icon, text and action follow the reading direction.

تم حفظ التغييرات بنجاح

هذا تنبيه يحتوي على أيقونة وعنوان ووصف.

<twig:ui:Alert dir="rtl" class="max-w-xl">
    <twig:ux:icon name="lucide:circle-check" />
    <twig:ui:Alert:Title>تم حفظ التغييرات بنجاح</twig:ui:Alert:Title>
    <twig:ui:Alert:Description>هذا تنبيه يحتوي على أيقونة وعنوان ووصف.</twig:ui:Alert:Description>
    <twig:ui:Alert:Action>
        <twig:ui:Button variant="outline" size="xs">تراجع</twig:ui:Button>
    </twig:ui:Alert:Action>
</twig:ui:Alert>

API Reference

`<twig:ui:Alert>`

Prop	Type	Description
`variant`	`'danger'` \| `'info'` \| `'success'` \| `'warning'`	Shortcut for a common `color`. Overrides `color` when set
`color`	`string`	Any Tailwind color name, such as `'purple'` or `'cyan'`. Defaults to `'neutral'`
`as`	`string`	The HTML tag to render. Defaults to `div`

Block	Description
`content`	An optional icon as first direct child, then the title, description and action

`<twig:ui:Alert:Title>`

Prop	Type	Description
`as`	`string`	The HTML tag to render. Defaults to `div`

Block	Description
`content`	The alert title

`<twig:ui:Alert:Description>`

Prop	Type	Description
`as`	`string`	The HTML tag to render. Defaults to `div`

Block	Description
`content`	The alert message. Can hold paragraphs or lists

`<twig:ui:Alert:Action>`

Placed at the end of the alert, vertically centered. Wraps below the content when the alert is narrow.

Prop	Type	Description
`inline`	`bool`	Whether the action sits at the end of the alert. Set to `false` to always place it below the content. Defaults to `true`
`as`	`string`	The HTML tag to render. Defaults to `div`

Block	Description
`content`	The action, usually a small `<twig:ui:Button>`