> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Callouts

> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/schemas/callouts.md).

## Introduction

Callouts are used to draw attention to important information or messages. They are often used for alerts, notices, or tips. You can create a callout using the `Callout` component:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Schemas\Components\Callout;

Callout::make('New version available')
    ->description('Filament v4 has been released with exciting new features and improvements.')
    ->info()
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/schemas/overview.md#component-utility-injection)
</details>

Loading preview

![Callout](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/schemas/layout/callout/simple.jpg)

## Using status variants

Callouts have built-in status variants that automatically set the appropriate icon, icon color, and background color. You can use the `danger()`, `info()`, `success()`, or `warning()` methods:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Schemas\Components\Callout;

Callout::make('Payment successful')
    ->description('Your order has been confirmed and is being processed.')
    ->success()

Callout::make('Session expiring soon')
    ->description('Your session will expire in 5 minutes. Save your work to avoid losing changes.')
    ->warning()

Callout::make('Connection failed')
    ->description('Unable to connect to the server. Please check your internet connection.')
    ->danger()
```

Loading preview

![Callout statuses](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/schemas/layout/callout/statuses.jpg)

## Removing the background color

By default, status callouts have a colored background. You can remove the background color while keeping the status icon and icon color by using `color(null)`:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Schemas\Components\Callout;

Callout::make('Scheduled maintenance')
    ->description('The system will be unavailable on Sunday from 2:00 AM to 4:00 AM.')
    ->warning()
    ->color(null)
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/schemas/overview.md#component-utility-injection)
</details>

Loading preview

![Callout without background](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/schemas/layout/callout/without-background.jpg)

## Adding a custom icon

You can add a custom [icon](https://filament-34a8cf01.mintlify.site/4.x/styling/icons.md) to the callout using the `icon()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Schemas\Components\Callout;
use Filament\Support\Icons\Heroicon;

Callout::make('Pro tip')
    ->description('You can use keyboard shortcuts to navigate faster. Press ? to see all available shortcuts.')
    ->icon(Heroicon::OutlinedLightBulb)
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/schemas/overview.md#component-utility-injection)
</details>

### Changing the icon color

You can change the icon color using the `iconColor()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Schemas\Components\Callout;
use Filament\Support\Icons\Heroicon;

Callout::make('Pro tip')
    ->description('You can use keyboard shortcuts to navigate faster. Press ? to see all available shortcuts.')
    ->icon(Heroicon::OutlinedLightBulb)
    ->iconColor('primary')
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/schemas/overview.md#component-utility-injection)
</details>

Loading preview

![Callout with custom icon](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/schemas/layout/callout/custom-icon.jpg)

### Changing the icon size

By default, the icon size is "large". You can change it to "small" or "medium" using the `iconSize()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Schemas\Components\Callout;
use Filament\Support\Enums\IconSize;

Callout::make('Quick note')
    ->description('This callout has a smaller icon.')
    ->info()
    ->iconSize(IconSize::Small)
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/schemas/overview.md#component-utility-injection)
</details>

Loading preview

![Callout with small icon](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/schemas/layout/callout/icon-size.jpg)

## Using a custom background color

You can set a custom background color using the `color()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Schemas\Components\Callout;
use Filament\Support\Icons\Heroicon;

Callout::make('Pro tip')
    ->description('You can use keyboard shortcuts to navigate faster. Press ? to see all available shortcuts.')
    ->color('primary')
    ->icon(Heroicon::OutlinedLightBulb)
    ->iconColor('primary')
```

Loading preview

![Callout with custom color](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/schemas/layout/callout/custom-color.jpg)

## Adding actions to the callout footer

You can add [actions](../actions) to the callout footer using the `actions()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\Action;
use Filament\Schemas\Components\Callout;

Callout::make('Your trial ends in 3 days')
    ->description('Upgrade now to keep access to all premium features.')
    ->warning()
    ->actions([
        Action::make('upgrade')
            ->label('Upgrade to Pro')
            ->button(),
        Action::make('compare')
            ->label('Compare plans'),
    ])
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/schemas/overview.md#component-utility-injection)
</details>

Loading preview

![Callout with actions](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/schemas/layout/callout/actions.jpg)

### Changing the footer actions alignment

By default, actions are aligned to the start. You can change the alignment using the `footerActionsAlignment()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\Action;
use Filament\Schemas\Components\Callout;
use Filament\Support\Enums\Alignment;

Callout::make('Updates available')
    ->description('New features and improvements are ready to install.')
    ->info()
    ->actions([
        Action::make('install')->label('Install Now'),
        Action::make('later')->label('Remind Me Later'),
    ])
    ->footerActionsAlignment(Alignment::End)
```

The available alignment options are `Alignment::Start`, `Alignment::Center`, `Alignment::End`, and `Alignment::Between`.

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/schemas/overview.md#component-utility-injection)
</details>

Loading preview

![Callout with actions aligned to the end](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/schemas/layout/callout/actions-aligned-end.jpg)

## Adding custom footer content

You can add custom content to the footer using the `footer()` method. This accepts an array of schema components:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\Action;
use Filament\Schemas\Components\Callout;
use Filament\Schemas\Components\Text;

Callout::make('Backup complete')
    ->description('Your data has been successfully backed up to the cloud.')
    ->success()
    ->footer([
        Text::make('Last backup: 5 minutes ago')
            ->color('gray'),
        Action::make('viewBackups')
            ->label('View All Backups')
            ->button(),
    ])
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/schemas/overview.md#component-utility-injection)
</details>

Loading preview

![Callout with custom footer content](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/schemas/layout/callout/footer.jpg)

## Adding custom control content

You can add custom content to the controls (top-right corner) using the `controls()` method. This accepts an array of schema components:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\Action;
use Filament\Schemas\Components\Callout;

Callout::make('Backup complete')
    ->description('Your data has been successfully backed up to the cloud.')
    ->success()
    ->controls([
        Action::make('dismiss')
            ->icon('heroicon-m-x-mark')
            ->iconButton()
            ->color('gray'),
    ])
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/schemas/overview.md#component-utility-injection)
</details>

## Adding control actions to the callout

You can add control [actions](../actions) to the top-right corner of the callout using the `controlActions()` method. For example, you could add a dismiss button that hides the callout for the duration of the user's session:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\Action;
use Filament\Schemas\Components\Callout;
use Filament\Support\Icons\Heroicon;

Callout::make('New version available')
    ->description('Filament v4 has been released with exciting new features and improvements.')
    ->info()
    ->controlActions([
        Action::make('dismiss')
            ->icon(Heroicon::XMark)
            ->iconButton()
            ->color('gray')
            ->action(fn () => session()->put('new-version-callout-dismissed', true)),
    ])
    ->visible(fn (): bool => ! session()->get('new-version-callout-dismissed'))
```

Loading preview

![Callout with control actions](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/schemas/layout/callout/control-actions.jpg)

## Announcing dynamically revealed callouts

If you reveal a callout dynamically, for example after an action completes, use `extraAttributes()` to make it a live region for assistive technology. Status variants alone do not make a callout a live region:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Schemas\Components\Callout;

Callout::make('Changes saved')
    ->success()
    ->extraAttributes(['role' => 'status']) // Use `alert` instead of `status` for urgent messages
```

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/packages/schemas/docs/06-callouts.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.