Components
Callout
Guides
Installation Upgrade guide Principles Patterns Theming Dark mode Customization Help
Layouts
Header Sidebar
Components
Accordion Autocomplete Badge Button Breadcrumbs Calendar
New
Callout
New
Card Chart
New
Checkbox Command Context Date picker
New
Dropdown Editor Field Heading Icon Input Modal Navbar Radio Select Separator Switch Table Tabs Textarea Toast Tooltip

Callout

Highlight important information or guide users toward key actions.

Upcoming maintenance
Our servers will be undergoing scheduled maintenance this Sunday from 2 AM - 5 AM UTC. Some services may be temporarily unavailable. Learn more
Copy to clipboard

Icon inside heading

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.
Log in to view

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
Log in to view

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.
Log in to view

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.
Log in to view

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.
Log in to view

Colors

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

You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
You've received a new message.
Log in to view

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.

Log in to view

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
Log in to view

Premium upsell

Encourage users to upgrade.

API access is restricted
Get access to all of our premium features and benefits.
Log in to view

Upgrade offer

Compact reminders to take advantage of special offers.

You could save $4,900/yr on annual billing.
Log in to view

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.

Log in to view

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
.
Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie