# Alert

Displays a callout for user attention, with semantic status tones.

- Install: `php artisan blatui:add alert`
- Source: https://blatui.remix-it.com/r/alert.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`

## resources/views/components/ui/alert.blade.php

```blade
@props([
    'variant' => 'default',
    'tone' => null,
])

@php
    $base = "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current";

    $variants = [
        'default' => 'bg-card text-card-foreground',
        'destructive' => 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive',
    ];

    // Semantic status tones — soft tinted callouts. Literal strings for the scanner.
    $tones = [
        'success' => 'border-success/20 bg-success/10 text-success [&>svg]:text-success *:data-[slot=alert-description]:text-success',
        'warning' => 'border-warning/20 bg-warning/10 text-warning [&>svg]:text-warning *:data-[slot=alert-description]:text-warning',
        'danger' => 'border-destructive/20 bg-destructive/10 text-destructive [&>svg]:text-destructive *:data-[slot=alert-description]:text-destructive',
        'info' => 'border-info/20 bg-info/10 text-info [&>svg]:text-info *:data-[slot=alert-description]:text-info',
        'neutral' => 'border-border bg-muted text-foreground [&>svg]:text-foreground *:data-[slot=alert-description]:text-muted-foreground',
    ];

    if ($tone && isset($tones[$tone])) {
        $classes = $base.' '.$tones[$tone];
    } else {
        $classes = $base.' '.($variants[$variant] ?? $variants['default']);
    }
@endphp

<div data-slot="alert" role="alert" {{ $attributes->twMerge($classes) }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/alert-action.blade.php

```blade
{{-- Optional trailing slot for an alert — e.g. a dismiss button — pinned top-right. --}}
<div data-slot="alert-action" {{ $attributes->twMerge('absolute end-2.5 top-2.5 flex items-center gap-1') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/alert-description.blade.php

```blade
<div data-slot="alert-description" {{ $attributes->twMerge('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed') }}>{{ $slot }}</div>
```

## resources/views/components/ui/alert-title.blade.php

```blade
<div data-slot="alert-title" {{ $attributes->twMerge('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight') }}>{{ $slot }}</div>
```