Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Alert

Displays a callout for user attention. Use composition parts, or pass title / description for the progressive prop API.

Usage
example.blade.php 
<x-slate::alert
    title="Payment successful"
    description="Your payment of $29.99 has been processed. A receipt has been sent to your email address."
>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <circle cx="12" cy="12" r="10" />
        <path d="m9 12 2 2 4-4" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
</x-slate::alert>

Composition
code 
Alert
├── Icon (optional SVG)
├── AlertTitle
├── AlertDescription
└── AlertAction

Prefer the prop API for typical callouts. Compose manually when you need custom markup:

example.blade.php 
<x-slate::alert>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <circle cx="12" cy="12" r="10" />
        <path d="M12 16v-4" stroke-linecap="round" />
        <path d="M12 8h.01" stroke-linecap="round" />
    </svg>
    <x-slate::alert-title>New feature available</x-slate::alert-title>
    <x-slate::alert-description>
        We've added dark mode support. You can enable it in your account settings.
    </x-slate::alert-description>
</x-slate::alert>

Destructive

Use variant="destructive" for error-style callouts.

example.blade.php 
<x-slate::alert
    variant="destructive"
    title="Payment failed"
    description="Your payment could not be processed. Please check your payment method and try again."
>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <circle cx="12" cy="12" r="10" />
        <path d="m15 9-6 6" stroke-linecap="round" />
        <path d="m9 9 6 6" stroke-linecap="round" />
    </svg>
</x-slate::alert>

Status variants

Slate also ships success, warning, and info using the semantic theme tokens.

example.blade.php 
<div class="grid gap-3">
    <x-slate::alert variant="success" title="Synced" description="Your workspace finished syncing." />
    <x-slate::alert variant="warning" title="Quota almost full" description="You have used 90% of your plan." />
    <x-slate::alert variant="info" title="Tip" description="You can invite teammates from Settings." />
</div>

Action

Pass an action slot for a button in the top-end corner.

example.blade.php 
<x-slate::alert
    title="Dark mode is now available"
    description="Enable it under your profile settings to get started."
>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <circle cx="12" cy="12" r="10" />
        <path d="M12 16v-4" stroke-linecap="round" />
        <path d="M12 8h.01" stroke-linecap="round" />
    </svg>
    <x-slot:action>
        <x-slate::button size="sm" variant="outline">Enable</x-slate::button>
    </x-slot:action>
</x-slate::alert>

API Reference

Alert
Prop Type Default Description
variant default | destructive | success | warning | info default Visual tone
title string — Compose alert-title automatically
description string — Compose alert-description automatically
as string div Root HTML element

Named slot: action → wraps content in alert-action.

Parts

alert-title, alert-description, and alert-action accept as and any HTML attributes.

Last updated .