Callout

Payment is awaiting confirmation

The bank will report the result in a moment. Learn more

<flux:callout icon="clock">
    <flux:callout.heading>Payment is awaiting confirmation</flux:callout.heading>

    <flux:callout.text>
        The bank will report the result in a moment.
        <flux:callout.link href="#">Learn more</flux:callout.link>
    </flux:callout.text>
</flux:callout>

Shorthand

For a plain callout, heading and text save you the child components.

Order placed successfully

Tracking code: MDS-140529

<flux:callout icon="check-circle" variant="success" heading="Order placed successfully" text="Tracking code: MDS-140529" />

Icon inside heading

For a more compact layout, move the icon onto the heading instead of the callout root.

Only 2 left in stock

<flux:callout>
    <flux:callout.heading icon="exclamation-triangle">Only 2 left in stock</flux:callout.heading>
</flux:callout>

Variants

Four semantic variants, each mapping to a color.

Heads up

Your address has not been verified yet.

Payment received

Your order is being packed.

Low stock

Only 2 items left at this price.

Payment failed

Any amount charged is returned within 72 hours.

<div class="space-y-3">
    <flux:callout variant="secondary" icon="information-circle" heading="Heads up" text="Your address has not been verified yet." />
    <flux:callout variant="success" icon="check-circle" heading="Payment received" text="Your order is being packed." />
    <flux:callout variant="warning" icon="exclamation-triangle" heading="Low stock" text="Only 2 items left at this price." />
    <flux:callout variant="danger" icon="x-circle" heading="Payment failed" text="Any amount charged is returned within 72 hours." />
</div>

Colors

Any Tailwind color, when the semantic variants do not fit.

Free shipping over 1,000,000 Toman

You have 3 gift cards to spend

7-day returns on every order

<div class="space-y-3">
    <flux:callout color="blue" icon="truck" heading="Free shipping over 1,000,000 Toman" />
    <flux:callout color="purple" icon="sparkles" heading="You have 3 gift cards to spend" />
    <flux:callout color="teal" icon="shield-check" heading="7-day returns on every order" />
</div>

With actions

The actions slot puts buttons under the text.

Team collaboration

Share projects, manage permissions, and collaborate in real time.

<flux:callout variant="secondary" icon="user-group">
    <flux:callout.heading>Team collaboration</flux:callout.heading>

    <flux:callout.text>Share projects, manage permissions, and collaborate in real time.</flux:callout.text>

    <x-slot name="actions">
        <flux:button>Invite member</flux:button>
        <flux:button variant="ghost">Manage team</flux:button>
    </x-slot>
</flux:callout>

Inline actions

With inline, the actions sit beside the text instead of below it.

A new version is available

<flux:callout inline icon="arrow-up-circle" heading="A new version is available">
    <x-slot name="actions">
        <flux:button size="sm">Update</flux:button>
    </x-slot>
</flux:callout>

Dismissible

The controls slot holds anything that belongs in the top corner — usually a close button.

Nowruz sale starts tomorrow

<flux:callout variant="secondary" icon="megaphone" x-data="{ shown: true }" x-show="shown">
    <flux:callout.heading>Nowruz sale starts tomorrow</flux:callout.heading>

    <x-slot name="controls">
        <flux:button icon="x-mark" variant="ghost" size="sm" square aria-label="Dismiss" x-on:click="shown = false" />
    </x-slot>
</flux:callout>

Reference

flux:callout

Prop	Description
icon	Name of the icon displayed next to the heading (e.g. `clock`).
icon:variant	Variant of that icon. Default: `mini`.
variant	Options: `secondary`, `success`, `warning`, `danger`.
color	Any Tailwind color (e.g. `blue`, `purple`). Default: `white`.
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 markup next to the heading.
actions	Buttons or links inside the callout.
controls	Extra UI in the top corner (e.g. a close button).

flux:callout.heading

Prop	Description
icon	Moves the icon inside the heading instead of the callout root.
icon:variant	Variant of that icon. Default: `mini`.

flux:callout.text

The body copy. Takes no props.

flux:callout.link

Prop	Description
external	If `true`, opens in a new tab (with `rel="noopener"`).