Alert

An inline notification banner for surfacing status, warnings, or errors. Alerts support six semantic intents, optional titles, actions, and dismissal.

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::alert intent="warning" title="Heads up">Validate every input before submitting.</x-wirekit::alert>

Basic Usage

<x-wirekit::alert>
    A new version of WireKit is available.
</x-wirekit::alert>

Variants

Each intent has a distinct semantic meaning and color. The background is a subtle tint derived via color-mix() from the matching token.

<x-wirekit::stack gap="sm">
    <x-wirekit::alert intent="info">Heads up — this is informational.</x-wirekit::alert>
    <x-wirekit::alert intent="success">Your changes have been saved.</x-wirekit::alert>
    <x-wirekit::alert intent="warning">Your trial expires in 3 days.</x-wirekit::alert>
    <x-wirekit::alert intent="danger">Failed to connect to the server.</x-wirekit::alert>
</x-wirekit::stack>

With Title

<x-wirekit::alert intent="warning" title="Unsaved changes">
    You have unsaved changes that will be lost if you leave this page.
</x-wirekit::alert>

Dismissible

Add dismissible to render a close button. Dismissal is handled by a tiny Alpine x-data block — no JavaScript bundle additions beyond the existing Alpine.

<x-wirekit::alert intent="info" dismissible title="Tip">
    You can personalize this theme in your settings.
</x-wirekit::alert>

Actions Slot

Attach action buttons below the message via the actions slot:

<x-wirekit::alert intent="danger" title="Connection lost" style="max-width: 28rem;">
    Unable to sync your data.
    <x-slot:actions>
        <x-wirekit::button size="sm" intent="danger">Retry</x-wirekit::button>
        <x-wirekit::button size="sm" intent="neutral" surface="ghost">Dismiss</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::alert>

Without Icon

Hide the default intent icon with :icon="false". This yields a quieter look — useful inside compact layouts or when the surrounding copy already conveys the severity.

<x-wirekit::alert intent="info" :icon="false">
    A quieter alert, no icon.
</x-wirekit::alert>

<x-wirekit::alert intent="info" :icon="false">Heads up — this is informational.</x-wirekit::alert>
<x-wirekit::alert intent="success" :icon="false">Your changes have been saved.</x-wirekit::alert>
<x-wirekit::alert intent="warning" :icon="false">Your trial expires in 3 days.</x-wirekit::alert>
<x-wirekit::alert intent="danger" :icon="false">Failed to connect to the server.</x-wirekit::alert>

Width & Layout

Alerts are block-level elements that fill their parent container by default. Control the width with Tailwind utility classes directly on the component — class is applied to the root element:

{{-- Constrain to a max width --}}
<x-wirekit::alert class="max-w-lg" intent="info">Narrow alert.</x-wirekit::alert>

{{-- Fixed width --}}
<x-wirekit::alert class="w-96" intent="success">Fixed 384px wide.</x-wirekit::alert>

{{-- Center a constrained alert --}}
<x-wirekit::alert class="max-w-md mx-auto" intent="warning">Centered alert.</x-wirekit::alert>

Height is determined automatically by the content. The alert grows to fit its message, title, and actions.

Props

Slots

Accessibility

• Role: danger alerts use role="alert" (assertive announcement). All other intents use role="status" (polite).
• Screen reader prefix: Each alert starts with a visually hidden intent label ("Warning: ...", "Error: ...") so the intent is announced even without visual context.
• Icons are decorative — marked aria-hidden="true" since the meaning is conveyed by the text.
• Dismiss button has aria-label="Dismiss" and visible focus ring.

Keyboard Interaction

With dismissible, the alert renders a real <button>: it takes Tab focus, shows the focus ring, and Enter / Space dismiss it. The focus then moves to the next control after the alert (or the last one before it), so the next Tab continues from where the alert was. Actions placed in the alert are ordinary focusable controls in source order. A plain alert has no interactive element.

Pitfalls

• Don't use an alert as a permanent UI element. Alerts are status messages — for persistent banners, use <x-wirekit::callout>. The semantic difference matters for screen readers.
• Don't show ten alerts at once. WCAG 2.4.3 (Focus Order) suffers when multiple aria-live="assertive" regions fire simultaneously. Group related warnings into a single alert with a list, or use <x-wirekit::toast-region> for transient notifications.

Design Tokens

Backgrounds are built with color-mix() — a 10% mix of the intent color into the elevated background. This keeps tints visually consistent across themes.

Customization

Override the default variant in config/wirekit.php:

'components' => [
    'alert' => ['variant' => 'warning'],
],

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.