突出重要信息，或引导用户采取关键操作。
<flux:callout icon="clock"> <flux:callout.heading>Upcoming maintenance</flux:callout.heading> <flux:callout.text> Our servers will be undergoing scheduled maintenance this Sunday from 2 AM - 5 AM UTC. Some services may be temporarily unavailable. <flux:callout.link href="#">Learn more</flux:callout.link> </flux:callout.text></flux:callout>若想获得更紧凑的布局，请将图标放入标题中，把 icon 属性添加到 flux:callout.heading，而非根级 flux:callout 组件。
<flux:callout> <flux:callout.heading icon="newspaper">Policy update</flux:callout.heading> <flux:callout.text>We've updated our Terms of Service and Privacy Policy. Please review them to stay informed.</flux:callout.text></flux:callout>为提示区块添加操作按钮，为用户提供明确的下一步行动。
<flux:callout icon="clock"> <flux:callout.heading>Subscription expiring soon</flux:callout.heading> <flux:callout.text>Your current plan will expire in 3 days. Renew now to avoid service interruption and continue accessing premium features.</flux:callout.text> <x-slot name="actions"> <flux:button>Renew now</flux:button> <flux:button variant="ghost" href="/pricing">View plans</flux:button> </x-slot></flux:callout>使用 inline 属性，使操作与提示区块同行显示。
<flux:callout icon="cube" variant="secondary" inline> <flux:callout.heading>Your package is delayed</flux:callout.heading> <x-slot name="actions"> <flux:button>Track order -></flux:button> <flux:button variant="ghost">Reschedule</flux:button> </x-slot></flux:callout><flux:callout icon="exclamation-triangle" variant="secondary" inline> <flux:callout.heading>Payment issue detected</flux:callout.heading> <flux:callout.text>Your last payment attempt failed. Update your billing details to prevent service interruption.</flux:callout.text> <x-slot name="actions"> <flux:button>Update billing</flux:button> </x-slot></flux:callout>使用 controls 插槽添加关闭按钮，让用户可以关闭不再需要查看的提示区块。
<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><!-- Wrapping divs to add smooth exist transitionheading="You've received a new message."--><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>使用预设变体来传达特定的语气或紧迫程度。
<flux:callout variant="secondary" icon="information-circle" heading="Your account has been successfully created." /><flux:callout variant="success" icon="check-circle" heading="Your account is verified and ready to use." /><flux:callout variant="warning" icon="exclamation-circle" heading="Please verify your account to unlock all features." /><flux:callout variant="danger" icon="x-circle" heading="Something went wrong. Try again or contact support." />使用 color 属性可调整提示区块的颜色，以符合你的使用场景。
<flux:callout color="zinc" ... /><flux:callout color="red" ... /><flux:callout color="orange" ... /><flux:callout color="amber" ... /><flux:callout color="yellow" ... /><flux:callout color="lime" ... /><flux:callout color="green" ... /><flux:callout color="emerald" ... /><flux:callout color="teal" ... /><flux:callout color="cyan" ... /><flux:callout color="sky" ... /><flux:callout color="blue" ... /><flux:callout color="indigo" ... /><flux:callout color="violet" ... /><flux:callout color="purple" ... /><flux:callout color="fuchsia" ... /><flux:callout color="pink" ... /><flux:callout color="rose" ... />使用 icon 插槽，自定义图标以契合你的品牌或具体场景。
<flux:callout> <x-slot name="icon"> <!-- Custom icon: https://lucide.dev/icons/alarm-clock --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-alarm-clock"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/><path d="M5 3 2 6"/><path d="m22 6-3-3"/><path d="M6.38 18.7 4 21"/><path d="M17.64 18.67 20 21"/></svg> </x-slot> <flux:callout.heading>Notification system updated</flux:callout.heading> <flux:callout.text> <p>We've improved our notification system to deliver alerts faster and more reliably.</p> </flux:callout.text></flux:callout>突出新的功能或更新内容。
<flux:callout icon="sparkles" color="purple"> <flux:callout.heading>Have a question?</flux:callout.heading> <flux:callout.text> Try our new AI assistant, Jeffrey. Let him handle tasks and answer questions for you. <flux:callout.link href="#">Learn more</flux:callout.link> </flux:callout.text></flux:callout>鼓励用户升级套餐。
<flux:callout icon="shield-check" color="blue" inline> <flux:callout.heading>API access is restricted</flux:callout.heading> <flux:callout.text>Get access to all of our premium features and benefits.</flux:callout.text> <x-slot name="actions" class="@md:h-full m-0!"> <flux:button>Upgrade to Pro -></flux:button> </x-slot></flux:callout>用简洁的方式提醒用户把握优惠。
<flux:callout icon="banknotes" color="lime" inline> <flux:callout.heading>You could save $4,900/yr on annual billing.</flux:callout.heading> <x-slot name="actions"> <flux:button>Switch now -></flux:button> </x-slot></flux:callout>引导用户采取某个操作或体验某项功能。
<flux:callout variant="secondary" icon="user-group"> <flux:callout.heading> Team collaboration <flux:badge color="purple" size="sm" inset="top bottom">Available with Pro</flux:badge> </flux:callout.heading> <flux:callout.text> <p>Share projects, manage permissions, and collaborate in real time with your team. Upgrade now to access these features.</p> </flux:callout.text> <x-slot name="actions"> <flux:button>Invite member</flux:button> <flux:button variant="ghost" class="@max-md:hidden">Manage team</flux:button> </x-slot></flux:callout>|
属性
|
说明
|
|---|---|
| icon |
显示在标题旁的图标名称（例如 clock）。浏览图标
|
| icon:variant |
显示在标题旁的图标变体（例如 outline）。浏览图标变体
|
| variant |
可选值：secondary、success、warning、danger。默认值：secondary
|
| color |
|
| inline |
当 true 时，操作将以内联形式显示。默认值：false。
|
| heading |
flux:callout.heading 的简写。
|
| text |
flux:callout.text 的简写。
|
|
插槽
|
说明
|
|---|---|
| icon |
在标题旁显示自定义图标。
|
| actions |
提示区块内的按钮或链接（flux:callout.button）。
|
| controls |
位于提示区块右上角的额外 UI 元素（如关闭按钮）。
|
|
属性
|
说明
|
|---|---|
| icon |
将图标移动到标题内部，而非保留在提示区块根节点。
|
| icon:variant |
显示在标题旁的图标变体（例如 outline）。浏览图标变体
|
|
插槽
|
说明
|
|---|---|
| icon |
在标题旁显示自定义图标。
|