alert

Callout for short, important messages.

Heads up!

You can add components to your app using the CLI.

Error

Your session has expired. Please log in again.

<div class="w-full max-w-md space-y-4">
    <x-ui.alert title="Heads up!">
        You can add components to your app using the CLI.
    </x-ui.alert>
    <x-ui.alert variant="destructive" title="Error">
        Your session has expired. Please log in again.
    </x-ui.alert>
</div>

Installation

php artisan ui:add alert

1. Install dependencies

composer: gehrisandro/tailwind-merge-laravel

2. Copy the source into resources/views/components/ui/

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

@props([
    'variant' => 'default',
    'title' => null,
])

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

    $variants = match ($variant) {
        'destructive'
            => 'bg-card text-destructive [&>svg]:text-current',
        default => 'bg-card text-card-foreground',
    };

    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        $base,
        $variants,
        $attributes->get('class'),
    );
@endphp

<div role="alert"
    {{ $attributes->except('class')->merge(['class' => $classes]) }}>
    @isset($icon)
        {{ $icon }}
    @endisset
    @if ($title)
        <div class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">
            {{ $title }}
        </div>
    @endif
    <div
        class="col-start-2 grid justify-items-start gap-1 text-sm {{ $variant === 'destructive' ? 'text-destructive/90' : 'text-muted-foreground' }} [&_p]:leading-relaxed">
        {{ $slot }}
    </div>
</div>

Usage

<x-ui.alert title="Heads up!">
    You can add components to your app using the CLI.
</x-ui.alert>

<x-ui.alert variant="destructive" title="Payment failed">
    Your card was declined. Try another payment method.
</x-ui.alert>

Variants: default, destructive. Optional `icon` and `title`.

Props

Every prop with its default. Pass any of them as attributes, using : to bind a PHP value.

@props([
    'variant' => 'default',
    'title' => null,
])