> ## Documentation Index
> Fetch the complete documentation index at: https://docs.laravelshopper.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Alert

> Display contextual feedback messages with different severity levels

export const PreviewAlert = ({message, color = 'warning', title = null, icon = null}) => {
  const iconColors = {
    info: '#3b82f6',
    danger: '#ef4444',
    success: '#22c55e',
    warning: '#f59e0b'
  };
  const titleColors = {
    info: '#2563eb',
    danger: '#dc2626',
    success: '#16a34a',
    warning: '#d97706'
  };
  return <div className={`sh-alert sh-alert-${color}`}>
      <div style={{
    display: 'flex',
    gap: 12
  }}>
        {icon !== false && <div style={{
    flexShrink: 0
  }}>
            <svg width="20" height="20" fill={iconColors[color]} viewBox="0 0 20 20">
              {color === 'info' && <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />}
              {color === 'danger' && <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />}
              {color === 'success' && <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />}
              {color === 'warning' && <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />}
            </svg>
          </div>}
        <div>
          {title && <span style={{
    display: 'block',
    fontSize: 14,
    lineHeight: '20px',
    fontWeight: 500,
    color: titleColors[color]
  }}>
              {title}
            </span>}
          <span style={{
    display: 'block',
    fontSize: 14,
    lineHeight: '20px',
    marginTop: title ? 8 : 0,
    color: iconColors[color]
  }}>
            {message}
          </span>
        </div>
      </div>
    </div>;
};

export const ComponentPreview = ({children, className = '', centered = true}) => {
  return <div className={`sh-preview ${className}`}>
      <div className={`sh-preview-content ${centered ? 'flex items-center justify-center' : ''}`}>
        {children}
      </div>
    </div>;
};

The Alert component displays colored feedback messages to users. It supports different colors for various contexts like warnings, errors, success messages, and general information.

## Preview

<ComponentPreview centered={false}>
  <PreviewAlert color="warning" title="Attention Required" message="Please review your settings before proceeding with this action." />
</ComponentPreview>

## Usage

```blade theme={null}
<x-shopper::alert
    color="warning"
    title="Attention Required"
    message="Please review your settings before proceeding."
    icon="heroicon-o-exclamation-triangle"
/>
```

## Props

<ParamField path="message" type="string" required>
  The main alert message content.
</ParamField>

<ParamField path="color" type="string" default="warning">
  The alert color theme. Options: `info`, `danger`, `success`, `warning`.
</ParamField>

<ParamField path="title" type="string" default="null">
  Optional title displayed above the message.
</ParamField>

<ParamField path="icon" type="string" default="null">
  Optional Filament icon name to display.
</ParamField>

<ParamField path="iconSize" type="IconSize" default="Medium">
  Size of the icon. Options: `Small`, `Medium`, `Large`.
</ParamField>

## Color Variants

### Info

<ComponentPreview centered={false}>
  <PreviewAlert color="info" title="Information" message="This is an informational message to help guide the user." />
</ComponentPreview>

```blade theme={null}
<x-shopper::alert
    color="info"
    title="Information"
    message="This is an informational message to help guide the user."
    icon="heroicon-o-information-circle"
/>
```

### Success

<ComponentPreview centered={false}>
  <PreviewAlert color="success" title="Success" message="Your changes have been saved successfully." />
</ComponentPreview>

```blade theme={null}
<x-shopper::alert
    color="success"
    title="Success"
    message="Your changes have been saved successfully."
    icon="heroicon-o-check-circle"
/>
```

### Warning

<ComponentPreview centered={false}>
  <PreviewAlert color="warning" title="Warning" message="This action may have unintended consequences. Please proceed with caution." />
</ComponentPreview>

```blade theme={null}
<x-shopper::alert
    color="warning"
    title="Warning"
    message="This action may have unintended consequences."
    icon="heroicon-o-exclamation-triangle"
/>
```

### Danger

<ComponentPreview centered={false}>
  <PreviewAlert color="danger" title="Error" message="Something went wrong. Please try again or contact support." />
</ComponentPreview>

```blade theme={null}
<x-shopper::alert
    color="danger"
    title="Error"
    message="Something went wrong. Please try again or contact support."
    icon="heroicon-o-x-circle"
/>
```

## Examples

### Alert Without Title

<ComponentPreview centered={false}>
  <PreviewAlert color="info" message="You can create alerts without a title for simpler messages." />
</ComponentPreview>

```blade theme={null}
<x-shopper::alert
    color="info"
    message="You can create alerts without a title for simpler messages."
/>
```

### Alert Without Icon

```blade theme={null}
<x-shopper::alert
    color="warning"
    title="Note"
    message="This alert has no icon."
    :icon="false"
/>
```

### Using in Forms

Alerts are commonly used to display validation summaries or important notices in forms:

```blade theme={null}
<x-shopper::card title="Product Settings">
    <x-shopper::alert
        color="warning"
        message="Changing the SKU will affect inventory tracking."
        icon="heroicon-o-exclamation-triangle"
        class="mb-4"
    />

    <form>
        <!-- Form fields -->
    </form>
</x-shopper::card>
```

## Blade Component Source

The Alert component is located at `packages/admin/resources/views/components/alert.blade.php`:

```blade theme={null}
@php
    use Filament\Support\Enums\IconSize;
@endphp

@props([
    'message',
    'color' => 'warning',
    'title' => null,
    'icon' => null,
    'iconSize' => IconSize::Medium,
])

@php
    if (! $iconSize instanceof IconSize) {
        $iconSize = filled($iconSize) ? IconSize::tryFrom($iconSize) ?? $iconSize : null;
    }

    $containerClass = \Illuminate\Support\Arr::toCssClasses([
        'rounded-lg p-4 ring-1',
        match ($color) {
            'info' => 'bg-info-50 ring-info-200 dark:ring-info-400/20 dark:bg-info-800/30',
            'danger' => 'bg-danger-50 ring-danger-200 dark:ring-danger-400/20 dark:bg-danger-800/30',
            'success' => 'bg-success-50 ring-success-200 dark:ring-success-400/20 dark:bg-success-800/30',
            'warning' => 'bg-warning-50 ring-warning-200 dark:ring-warning-400/20 dark:bg-warning-800/30',
            default => 'bg-custom-50 ring-custom-200 dark:ring-custom-400/20 dark:bg-custom-800/30',
        },
    ]);
@endphp

<div {{ $attributes->twMerge(['class' => $containerClass]) }}>
    <div class="flex gap-3">
        @if ($icon)
            <div class="shrink-0">
                <x-filament::icon :icon="$icon" :class="$iconClasses" />
            </div>
        @endif

        <div>
            @if ($title)
                <h3 @class([$titleClasses])>{{ $title }}</h3>
            @endif

            <p @class([$messageClasses])>
                {{ $message }}
            </p>
        </div>
    </div>
</div>
```