Callout

Persistent inline notices for documentation-style content. Callouts are visually denser than Alerts (a stronger background tint), with an optional one-sided accent stripe via the stripe prop. Unlike alerts, callouts are not dismissible; they convey persistent, contextual information.

Live Sandbox

This is a hydrated playground for the component. Toggle "Live preview" on the block below to swap the static HTML render for a real Livewire instance — every prop in the component's sandbox schema becomes an editable form field inside the iframe, so you can try different prop combinations live without writing any local code.

<x-wirekit::callout variant="info">Use the toggle above to edit the props live.</x-wirekit::callout>

Basic Usage

<x-wirekit::callout>
    Payment processing is handled by Stripe. You will not be charged until your trial ends.
</x-wirekit::callout>

With Title

Use the title slot for a bold heading:

<x-wirekit::callout>
    <x-slot:title>Heads up</x-slot:title>
    This action cannot be undone. Make sure you have a backup before proceeding.
</x-wirekit::callout>

Variants

Five semantic variants control color, icon, and background tint:

<x-wirekit::callout variant="info">
    <x-slot:title>New feature</x-slot:title>
    We've added dark mode support. Toggle it from your account settings.
</x-wirekit::callout>

<x-wirekit::callout variant="success">
    <x-slot:title>Migration complete</x-slot:title>
    All records have been successfully migrated to the new schema.
</x-wirekit::callout>

<x-wirekit::callout variant="warning">
    <x-slot:title>Deprecation notice</x-slot:title>
    The `color` prop has been renamed to `variant`. Update your code before v2.0.
</x-wirekit::callout>

<x-wirekit::callout variant="danger">
    <x-slot:title>Breaking change</x-slot:title>
    The API endpoint has moved. Update your integration immediately.
</x-wirekit::callout>

<x-wirekit::callout variant="neutral">
    <x-slot:title>Note</x-slot:title>
    This section is optional. You can skip it if you're already familiar with the concepts.
</x-wirekit::callout>

With Actions

Use the actions slot for buttons or links below the body text:

<x-wirekit::callout variant="warning">
    <x-slot:title>Update required</x-slot:title>
    A new version of WireKit is available with important security fixes.
    <x-slot:actions>
        <x-wirekit::button size="sm">Update now</x-wirekit::button>
        <x-wirekit::button size="sm" intent="neutral" surface="ghost">Learn more</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::callout>

Without Border

Set bordered to false for a cleaner, borderless look; the background tint carries the surface:

<x-wirekit::callout :bordered="false">
    <x-slot:title>Tip</x-slot:title>
    You can combine multiple filters using the search bar.
</x-wirekit::callout>

<x-wirekit::callout :bordered="false" variant="warning">
    <x-slot:title>Deprecation notice</x-slot:title>
    The `color` prop has been renamed to `variant`.
</x-wirekit::callout>

<x-wirekit::callout :bordered="false" variant="danger">
    <x-slot:title>Breaking change</x-slot:title>
    The API endpoint has moved. Update your integration.
</x-wirekit::callout>

Accent Stripe (opt-in)

Add a one-sided accent bar with the stripe prop. It is off by default: a plain callout is the alert-style 4-sided tinted border, so the stripe is there when you want extra emphasis rather than on every notice. Combine stripe with :bordered="false" for a bar-only notice.

<x-wirekit::callout stripe variant="info">
    <x-slot:title>With stripe</x-slot:title>
    Pass the <code>stripe</code> prop to add a one-sided accent bar.
</x-wirekit::callout>

<x-wirekit::callout stripe :bordered="false" variant="success">
    <x-slot:title>Stripe only</x-slot:title>
    Combine <code>stripe</code> with <code>:bordered="false"</code> for a bar-only notice.
</x-wirekit::callout>

Without Icon

Hide the default icon:

<x-wirekit::callout :icon="false">
    This is a simple callout without any icon decoration.
</x-wirekit::callout>

Callout vs Alert

Width & Layout

Callouts are block-level elements that fill their parent width. Control the width with Tailwind classes directly on the component:

<x-wirekit::callout class="max-w-lg" variant="info" title="Tip">
    Keep callouts short and actionable.
</x-wirekit::callout>

Props

Slots

Accessibility

• Rendered as a plain <div>: no landmark, and no live region.

  A landmark would be wrong twice over. complementary is reserved for a self-contained section significant to the page, and a note in the flow of the text is not that — and a page usually already has one in its sidebar, so a second with no distinguishing name is an accessibility failure that gets reported against the sidebar rather than against the callout.

  A live region (role="status", role="alert") would be wrong for the opposite reason. This component is persistent content that is already present when the page loads, so a live region says nothing at that moment — and then re-announces the entire callout every time the element re-renders, though nothing about it changed. For content that genuinely arrives and asks for attention, use Alert.

• Decorative icons are aria-hidden="true".

• The opt-in accent stripe, when shown, is aria-hidden="true".

• No interactive elements require keyboard handling (callouts are static).

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Pitfalls

• Don't use a callout for a single sentence — <x-wirekit::alert> is the right tool. Callouts are for multi-paragraph context that lives in flow with the page; alerts are for state announcements that interrupt.

Design Tokens

Usage & Conventions

Prop conventions — this component uses one or more of the shared semantic prop names (intent / variant / tone / surface). See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.