For a more compact layout, place the icon inside the heading by adding the icon prop to flux:callout.heading instead of the root flux:callout component.

Policy update

We've updated our Terms of Service and Privacy Policy. Please review them to stay informed.

Copy to clipboard

With actions

Add action buttons to your callout to provide users with clear next steps.

Subscription expiring soon

Your current plan will expire in 3 days. Renew now to avoid service interruption and continue accessing premium features.

View plans

Copy to clipboard

Inline actions

Use the inline prop to display actions inline with the callout.

Your package is delayed

Payment issue detected

Your last payment attempt failed. Update your billing details to prevent service interruption.

Copy to clipboard

Dismissible

Add a close button, using the controls slot, to allow users to dismiss callouts they no longer care to see.

Callouts do not include built-in dismiss functionality. This is intentional—dismissal behavior depends on your app’s needs. You might want to remove it from the DOM on the frontend or persist the dismissal in a backend database.

Upcoming meeting

10:00 AM

Unusual login attempt

We detected a login from a new device in New York, USA. If this was you, no action is needed. If not, secure your account immediately.

Copy to clipboard

<flux:callout icon="bell" variant="secondary" inline x-data="{ visible: true }" x-show="visible">
    <flux:callout.heading class="flex gap-2 @max-md:flex-col items-start">Upcoming meeting <flux:text>10:00 AM</flux:text></flux:callout.heading>

<x-slot name="controls">
        <flux:button icon="x-mark" variant="ghost" x-on:click="visible = false" />
    </x-slot>
</flux:callout>

<div x-data="{ visible: true }" x-show="visible" x-collapse>
    <div x-show="visible" x-transition>
        <flux:callout icon="finger-print" variant="secondary">
            <flux:callout.heading>Unusual login attempt</flux:callout.heading>
            <flux:callout.text>We detected a login from a new device in <span class="font-medium text-zinc-800 dark:text-white">New York, USA</span>. If this was you, no action is needed. If not, secure your account immediately.</flux:callout.text>

<x-slot name="actions">
                <flux:button>Change password</flux:button>
                <flux:button variant="ghost">Review activity</flux:button>
            </x-slot>

<x-slot name="controls">
                <flux:button icon="x-mark" variant="ghost" x-on:click="visible = false" />
            </x-slot>
        </flux:callout>
    </div>
</div>

Variants

Use predefined variants to convey a specific tone or level of urgency.

Your account has been successfully created.

Your account is verified and ready to use.

Please verify your account to unlock all features.

Something went wrong. Try again or contact support.

Copy to clipboard

Colors

Use the color prop to change the color of the callout to match your use case.

You've received a new message.

Copy to clipboard

Custom icon

Use a custom icon to match your brand or specific use case using the icon slot.

Notification system updated

We've improved our notification system to deliver alerts faster and more reliably.

Copy to clipboard

Examples

Feature spotlight

Call attention to a new feature or update.

Have a question?

Try our new AI assistant, Jeffrey. Let him handle tasks and answer questions for you. Learn more

Copy to clipboard

Premium upsell

Encourage users to upgrade.

API access is restricted

Get access to all of our premium features and benefits.

Copy to clipboard

Upgrade offer

Compact reminders to take advantage of special offers.

You could save $4,900/yr on annual billing.

Copy to clipboard

Engagement prompt

Nudge users toward an action or feature.

Team collaboration

Available with Pro

Share projects, manage permissions, and collaborate in real time with your team. Upgrade now to access these features.

Copy to clipboard

Related components

Toast

Display temporary notifications with a toast

Card

Display content in a card component

Reference

flux:callout

Prop	Description
icon	Name of the icon displayed next to the heading (e.g., clock). Explore icons
icon:variant	Variant of the icon displayed next to the heading (e.g., outline). Explore icon variants
variant	Options: secondary, success, warning, danger. Default: secondary
color	Custom color (e.g., red, blue). View available Tailwind colors ->
inline	If true, actions appear inline. Default: false.
heading	Shorthand for flux:callout.heading.
text	Shorthand for flux:callout.text.

Slot	Description
icon	Custom icon displayed next to the heading.
actions	Buttons or links inside the callout (flux:callout.button).
controls	Extra UI elements placed at the top right of the callout (e.g., close button).

flux:callout.heading

Prop	Description
icon	Moves the icon inside the heading instead of the callout root.
icon:variant	Variant of the icon displayed next to the heading (e.g., outline). Explore icon variants

Slot	Description
icon	Custom icon displayed next to the heading.

flux:callout.text

Slot	Description
default	Text content inside the callout.

flux:callout.link

Prop	Description
href	The URL the link points to.
external	If true, the link opens in a new tab. Default: false.

Built with by
Caleb Porzio and Hugo Sainte-Marie