Filament Simple Alert

https://github.com/codewithdennis/filament-simple-alert
Admin
This package provides a straightforward and easy-to-use alert component for Filament applications,...
Tokens:6,362
Snippets:49
Trust Score:9.1
License:MIT
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Filament Simple Alert via Composer

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Install the package using Composer package manager. This adds the filament-simple-alert dependency to your Laravel project.

```bash
composer require codewithdennis/filament-simple-alert
```

--------------------------------

### Example with HTML Title and Action in Filament Simple Alert (PHP)

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Illustrates creating a Filament Simple Alert with an HTML-formatted title and a detailed action button. The action includes an icon, icon position, link styling, and URL configuration. Requires `CodeWithDennisSimpleAlertComponentsInfolistsSimpleAlert`, `FilamentFormsComponentsActions`, `IlluminateSupportHtmlString`, and `FilamentSupportEnumsIconPosition`.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
use Filament\Forms\Components\Actions;

SimpleAlert::make('example')
    ->success()
    ->title(new HtmlString('<strong>Hoorraayy! Your request has been approved! 🎉</strong>'))
    ->description('Lorem ipsum dolor sit amet consectetur adipisicing elit.')
    ->actions([
         Action::make('filament')
            ->label('Details')
            ->icon('heroicon-m-arrow-long-right')
            ->iconPosition(IconPosition::After)
            ->link()
            ->url('https://filamentphp.com')
            ->openUrlInNewTab()
            ->color('success'),
    ]),
```

--------------------------------

### Complete Form Alert with All Features - PHP

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

A comprehensive example of a form alert combining multiple features like success styling, border, icon alignment, HTML titles, dynamic descriptions, and action buttons with icons and external links. Requires 'simple-alert' and Filament.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;
use Filament\Forms\Components\Actions\Action;
use Filament\Support\Enums\IconPosition;
use Illuminate\Support\HtmlString;

SimpleAlert::make('complete-form-alert')
    ->success()
    ->border()
    ->iconVerticalAlignment('start')
    ->title(new HtmlString('<strong>Request Approved! 🎉</strong>'))
    ->description('Your request has been reviewed and approved by the administrator. You will receive a confirmation email shortly.')
    ->actionsVerticalAlignment('start')
    ->actions([
        Action::make('view-details')
            ->label('View Details')
            ->icon('heroicon-m-arrow-long-right')
            ->iconPosition(IconPosition::After)
            ->link()
            ->url('https://example.com/request/details')
            ->openUrlInNewTab()
            ->color('success'),
    ])
```

--------------------------------

### Create Alert with Vertical Actions Alignment - PHP

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Shows how to control the vertical alignment of action buttons within an alert, setting it to 'start' for top alignment. Useful for consistent UI layouts. Requires 'simple-alert' and Filament.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;
use Filament\Forms\Components\Actions\Action;

SimpleAlert::make('aligned-actions')
    ->success()
    ->title('Update Available')
    ->description('A new version of the application is available. Update now to get the latest features and improvements.')
    ->actionsVerticalAlignment('start')
    ->actions([
        Action::make('update')
            ->label('Update Now')
            ->color('success'),
        Action::make('later')
            ->label('Remind Me Later')
            ->color('gray'),
    ])
```

--------------------------------

### Create Alert with Icon Vertical Alignment

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create an alert with customized icon vertical alignment. The icon is aligned to the start (top) of the content for better visual hierarchy in multi-line descriptions.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

SimpleAlert::make('multiline-alert')
    ->warning()
    ->iconVerticalAlignment('start')
    ->title('Important Notice')
    ->description('This is a longer description that spans multiple lines. The icon will be aligned to the top of the content for better visual hierarchy.')
```

--------------------------------

### Set Vertical Alignment for Alert Actions (PHP)

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Shows how to control the vertical alignment of actions within a Filament Simple Alert using the `actionsVerticalAlignment` method. Accepts 'start' or 'center' as possible values. Requires `CodeWithDennisSimpleAlertComponentsInfolistsSimpleAlert` and `FilamentFormsComponentsActions`.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
use Filament\Forms\Components\Actions;

SimpleAlert::make('example')
    ->actionsVerticalAlignment('start'), // possible values: start, center
```

--------------------------------

### Set Icon Vertical Alignment for SimpleAlert

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Adjust the vertical alignment of the alert icon using the iconVerticalAlignment() method. Accepts 'start' or 'center' as values to align the icon at the top or center of the alert.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')
    ->iconVerticalAlignment('start')
```

--------------------------------

### Resource Edit Page Alert with Actions

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Shows how to integrate 'SimpleAlert' into a Filament resource's edit page to display warnings and provide actions. This example creates a warning alert that is conditionally visible based on the record's 'is_deactivated' status and includes an action button to 'Reactivate Account' with a confirmation step.

```php
use Filament\Resources\Pages\EditRecord;
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;
use Filament\Forms\Components\Actions\Action;

class EditUser extends EditRecord
{
    protected function getHeaderWidgets(): array
    {
        return [
            SimpleAlert::make('deactivated-warning')
                ->warning()
                ->border()
                ->visible(fn ($record) => $record->is_deactivated)
                ->title('Account Deactivated')
                ->description('This user account is currently deactivated. Reactivate to restore access.')
                ->actions([
                    Action::make('reactivate')
                        ->label('Reactivate Account')
                        ->requiresConfirmation()
                        ->action(fn ($record) => $record->activate())
                        ->color('success'),
                ]),
        ];
    }
}
```

--------------------------------

### Create Custom Filament Theme

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Generate a custom Filament theme using the artisan command. This creates a theme directory for customizing Filament components.

```bash
php artisan filament:make-theme
```

--------------------------------

### Create Alerts with Icon Animation Options

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create multiple alert components demonstrating different icon animation options: Spin, Pulse, and Bounce. Each animation provides different visual feedback.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;
use CodeWithDennis\SimpleAlert\Components\Enums\IconAnimation;

// Spinning icon
SimpleAlert::make('sync-alert')
    ->icon('heroicon-s-arrow-path', IconAnimation::Spin)
    ->title('Syncing data...')

// Pulsing icon
SimpleAlert::make('live-alert')
    ->icon('heroicon-s-signal', IconAnimation::Pulse)
    ->title('Live updates enabled')

// Bouncing icon
SimpleAlert::make('notification-alert')
    ->icon('heroicon-s-bell', IconAnimation::Bounce)
    ->title('New notification')
```

--------------------------------

### Create Alert with Multiple Actions - PHP

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Demonstrates how to configure an alert with multiple action buttons, each performing different tasks like renewing a subscription or learning more. Supports icons, custom actions, and external links. Requires 'simple-alert' and Filament.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;
use Filament\Forms\Components\Actions\Action;
use Filament\Support\Enums\IconPosition;

SimpleAlert::make('upgrade-alert')
    ->warning()
    ->title('Subscription Ending Soon')
    ->description('Your subscription will expire in 3 days. Renew now to avoid service interruption.')
    ->actions([
        Action::make('renew')
            ->label('Renew Now')
            ->icon('heroicon-m-credit-card')
            ->color('success')
            ->action(fn () => redirect()->route('billing.renew')),
        Action::make('learn-more')
            ->label('Learn More')
            ->icon('heroicon-m-arrow-long-right')
            ->iconPosition(IconPosition::After)
            ->link()
            ->url('https://example.com/pricing')
            ->openUrlInNewTab()
            ->color('warning'),
    ])
```

--------------------------------

### Create Warning Alert Component

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create a warning alert component using the Infolists component. Displays warning messages with a title and description.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('warning-message')
    ->warning()
    ->title('Warning')
    ->description('Your subscription will expire in 3 days.')
```

--------------------------------

### Create Info Alert Component

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create an info alert component using the Infolists SimpleAlert component. Displays informational messages with a title and description.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('info-message')
    ->info()
    ->title('Information')
    ->description('Your profile has been viewed 127 times this month.')
```

--------------------------------

### Import SimpleAlert Component for Infolists

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Import the SimpleAlert component from the Infolists namespace to use alerts in infolist components within Filament.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
```

--------------------------------

### Create Alert with Single Action Button - PHP

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Illustrates how to add a single action button to an alert, allowing users to perform an action like viewing documentation. The action can be configured with labels, URLs, and target behavior. Requires 'simple-alert' and Filament.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;
use Filament\Forms\Components\Actions\Action;

SimpleAlert::make('action-alert')
    ->info()
    ->title('Documentation Available')
    ->description('Learn more about this feature in our documentation.')
    ->actions([
        Action::make('view-docs')
            ->label('View Documentation')
            ->url('https://filamentphp.com')
            ->openUrlInNewTab()
            ->color('info'),
    ])
```

--------------------------------

### Configure Tailwind CSS for Filament Simple Alert

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Add the package resources to Tailwind CSS content configuration and include animation classes in the safelist to ensure proper styling and animations are included in the compiled CSS.

```javascript
module.exports = {
    content: [
        './vendor/codewithdennis/filament-simple-alert/resources/**/*.blade.php',
    ],
    safelist: [
        'animate-spin',
        'animate-pulse',
        'animate-bounce'
    ],
}
```

--------------------------------

### Create Simple Alert with Alert Type Methods

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Create a SimpleAlert component using the make() method and apply alert type styling with danger(), info(), success(), or warning() methods. Each method applies predefined styling and default icons for the alert type.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')
    ->danger()
    ->info()
    ->success()
    ->warning()
```

--------------------------------

### Add Actions to Filament Simple Alert (PHP)

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Demonstrates how to add actions to a Filament Simple Alert component using the `actions` method. Supports standard Filament action features like labels, URLs, and opening links in new tabs. Requires `CodeWithDennisSimpleAlertComponentsInfolistsSimpleAlert` and `FilamentFormsComponentsActions`.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
use Filament\Forms\Components\Actions;

SimpleAlert::make('example')
    ->columnSpanFull()
    ->success()
    ->title('Simple Alert')
    ->description('This is an example of a simple alert.')
    ->actions([
        Action::make('read-example')
            ->label('Read more')
            ->url('https://filamentphp.com')
            ->openUrlInNewTab()
            ->color('info'),
    ]),
```

--------------------------------

### Create Success Alert Component

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create a success alert component to display successful operation messages. Uses the success() method to set the alert styling.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

SimpleAlert::make('success-notification')
    ->success()
    ->title('Operation Successful')
    ->description('Your changes have been saved successfully.')
```

--------------------------------

### Create Alert with Custom Icon

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create an alert component with a custom Heroicon icon. The icon is specified using the Heroicon naming convention.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

SimpleAlert::make('user-alert')
    ->color('blue')
    ->icon('heroicon-s-users')
    ->title('Team Members')
    ->description('5 new members joined your team.')
```

--------------------------------

### Create Custom Color Alert Component

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create an alert with custom color from the Filament color system and a custom icon. Allows flexible styling beyond predefined alert types.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

SimpleAlert::make('custom-alert')
    ->color('purple')
    ->icon('heroicon-s-sparkles')
    ->title('Premium Feature')
    ->description('Upgrade to access this feature.')
```

--------------------------------

### Create Alert with Border - PHP

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Demonstrates how to create a success alert with a visible border using the SimpleAlert component. This is useful for visually distinct notifications. Requires the 'simple-alert' package and Filament.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

SimpleAlert::make('bordered-alert')
    ->success()
    ->border()
    ->title('Payment Received')
    ->description('Your payment of $99.00 has been processed.')
```

--------------------------------

### Dynamic Infolist Alert with Conditional Styling - PHP

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Shows an infolist alert with dynamic color, icon, title, and description based on record properties like overdue status. It also includes a conditional action button. Requires 'simple-alert' and Filament.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
use Filament\Forms\Components\Actions\Action;
use CodeWithDennis\SimpleAlert\Components\Enums\IconAnimation;

SimpleAlert::make('dynamic-infolist-alert')
    ->color(fn ($record) => $record->isOverdue() ? 'danger' : 'info')
    ->icon(
        fn ($record) => $record->isOverdue()
            ? 'heroicon-s-exclamation-triangle'
            : 'heroicon-s-clock',
        fn ($record) => $record->isProcessing() ? IconAnimation::Pulse : null
    )
    ->border()
    ->title(fn ($record) => $record->isOverdue()
        ? 'Overdue Task'
        : 'Task Status'
    )
    ->description(fn ($record) => $record->isOverdue()
        ? "This task was due on {$record->due_date->format('M d, Y')}"
        : "Due on {$record->due_date->format('M d, Y')}"
    )
    ->actions([
        Action::make('complete')
            ->label('Mark Complete')
            ->visible(fn ($record) => !$record->is_completed)
            ->action(fn ($record) => $record->markAsCompleted())
            ->color('success'),
    ])
```

--------------------------------

### Create Alert with HTML String Icon

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create an alert using an HTML string or emoji as the icon instead of Heroicon. Uses Illuminate\Support\HtmlString to render custom HTML.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;
use Illuminate\Support\HtmlString;

SimpleAlert::make('emoji-alert')
    ->color('yellow')
    ->icon(new HtmlString('🎉'))
    ->title('Congratulations!')
    ->description('You have completed all tasks.')
```

--------------------------------

### Create Conditional Border Alert - PHP

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Shows how to create an info alert with a border that is conditionally displayed based on a record's property. This allows for dynamic styling of alerts. Requires the 'simple-alert' package and Filament.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

SimpleAlert::make('conditional-border')
    ->info()
    ->border(fn ($record) => $record->is_important)
    ->title('System Notification')
    ->description('Check your email for verification.')
```

--------------------------------

### Create Danger Alert Component

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create a danger alert component with a title and description. Uses the SimpleAlert class from the Forms component namespace with the danger() method to set the alert type.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

SimpleAlert::make('error-notification')
    ->danger()
    ->title('Error Occurred')
    ->description('Unable to process your request. Please try again.')
```

--------------------------------

### Create Dynamic Color Alert Based on State

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create an alert with dynamic color based on record state. Uses a closure to determine color and title based on the record's status property.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

SimpleAlert::make('status-alert')
    ->color(fn ($record) => match($record->status) {
        'active' => 'success',
        'pending' => 'warning',
        'inactive' => 'danger',
        default => 'gray'
    })
    ->title(fn ($record) => "Status: {$record->status}")
```

--------------------------------

### Import SimpleAlert Component for Forms

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Import the SimpleAlert component from the Forms namespace to use alerts in form components within Filament.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;
```

--------------------------------

### Create Alert with Animated Icon

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Create an alert with a spinning animated icon. Uses the IconAnimation enum to apply animation effects to the icon.

```php
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;
use CodeWithDennis\SimpleAlert\Components\Enums\IconAnimation;

SimpleAlert::make('loading-alert')
    ->info()
    ->icon('heroicon-s-arrow-path', IconAnimation::Spin)
    ->title('Processing')
    ->description('Please wait while we process your request.')
```

--------------------------------

### Configure Tailwind CSS for Filament Simple Alert

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Add the package blade files to Tailwind CSS content configuration and safelist animation classes to prevent purging during build. Update your tailwind.config.js file with the provided paths and safelist configuration.

```javascript
module.exports = {
    // ... other config
    safelist: [
        'animate-spin',
        'animate-pulse',
        'animate-bounce'
    ],
}

```

--------------------------------

### Multi-Alert Form Layout with SimpleAlert

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Demonstrates how to create a form layout with multiple 'SimpleAlert' components in Filament. This includes setting different alert types (danger, success, info), conditional visibility based on session data, and custom descriptions. It utilizes Filament's Section component to group the alerts.

```php
use Filament\Forms\Components\Section;
use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

Section::make('Notifications')
    ->schema([
        SimpleAlert::make('error-alert')
            ->danger()
            ->visible(fn () => session()->has('error'))
            ->title('Error')
            ->description(fn () => session('error')),

        SimpleAlert::make('success-alert')
            ->success()
            ->visible(fn () => session()->has('success'))
            ->title('Success')
            ->description(fn () => session('success')),

        SimpleAlert::make('info-alert')
            ->info()
            ->border()
            ->title('Getting Started')
            ->description('Fill out the form below to create your account.')
            ->columnSpanFull(),
    ])
```

--------------------------------

### Add Description to SimpleAlert Component

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Add descriptive text to the alert using the description() method. The description provides additional context or details below the title.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')
    ->description('This is the description')
```

--------------------------------

### Set Icon for SimpleAlert Component

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Customize the alert icon using the icon() method with a heroicon string. Supports heroicon library icons and HtmlString for custom icons or emoji. Default icons are provided for each alert type.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')
    ->color('purple')
    ->icon('heroicon-s-users')
```

--------------------------------

### Add Icon Animation to SimpleAlert

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Apply animation to the alert icon by passing an IconAnimation enum as the second parameter to the icon() method. Supported animations include Spin, Pulse, and Bounce.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
use CodeWithDennis\SimpleAlert\Components\Enums\IconAnimation;

SimpleAlert::make('example')
    ->icon('heroicon-s-arrow-path', IconAnimation::Spin)
```

--------------------------------

### Add Border to SimpleAlert Component

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Apply a border to the alert using the border() method. Adds a visual border around the alert component to enhance visual separation.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')
    ->border()
```

--------------------------------

### SimpleAlert Icon Animation Enum

Source: https://context7.com/codewithdennis/filament-simple-alert/llms.txt

Provides the 'IconAnimation' enum values used for styling icons within 'SimpleAlert' components. These values correspond to Tailwind CSS animation classes for visual effects like spinning, pulsing, or bouncing.

```php
IconAnimation::Spin    // 'animate-spin'
IconAnimation::Pulse   // 'animate-pulse'
IconAnimation::Bounce  // 'animate-bounce'
```

--------------------------------

### Add Title to SimpleAlert Component

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Add a title heading to the alert using the title() method. The title appears prominently in the alert and supports text content including emoji.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')
    ->title('Hoorraayy! Your request has been approved! 🎉')
```

--------------------------------

### Set Custom Color for SimpleAlert Component

Source: https://github.com/codewithdennis/filament-simple-alert/blob/3.x/README.md

Apply a custom color to the alert component using the color() method. Accepts any valid Filament color name like 'purple', 'blue', etc.

```php
use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')
    ->color('purple')
```
Tokens:
Raw