diff --git a/docs-assets/app/app/Http/Livewire/Actions.php b/docs-assets/app/app/Http/Livewire/Actions.php
index 00ca03b710..324bedc98f 100644
--- a/docs-assets/app/app/Http/Livewire/Actions.php
+++ b/docs-assets/app/app/Http/Livewire/Actions.php
@@ -62,6 +62,39 @@ class Actions extends Component implements HasActions
->iconPosition('after');
}
+ public function indicatorAction(): Action
+ {
+ return Action::make('indicatorAction')
+ ->iconButton()
+ ->icon('heroicon-m-funnel')
+ ->indicator(5);
+ }
+
+ public function successIndicatorAction(): Action
+ {
+ return Action::make('successIndicatorAction')
+ ->iconButton()
+ ->icon('heroicon-m-funnel')
+ ->indicator(5)
+ ->indicatorColor('success');
+ }
+
+ public function outlinedAction(): Action
+ {
+ return Action::make('outlinedAction')
+ ->label('Edit')
+ ->button()
+ ->outlined();
+ }
+
+ public function inlineIconAction(): Action
+ {
+ return Action::make('inlineIconAction')
+ ->icon('heroicon-o-pencil-square')
+ ->iconButton()
+ ->inline();
+ }
+
public function confirmationModalAction(): Action
{
return Action::make('confirmationModalAction')
diff --git a/docs-assets/app/resources/views/livewire/actions.blade.php b/docs-assets/app/resources/views/livewire/actions.blade.php
index e358364c88..564b5e929f 100644
--- a/docs-assets/app/resources/views/livewire/actions.blade.php
+++ b/docs-assets/app/resources/views/livewire/actions.blade.php
@@ -28,6 +28,22 @@
{{ $this->iconAfterAction }}
+
+ {{ $this->indicatorAction }}
+
+
+
+ {{ $this->successIndicatorAction }}
+
+
+
+ {{ $this->outlinedAction }}
+
+
+
+ {{ $this->inlineIconAction }}
+
+
{{ $this->confirmationModalAction }}
diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js
index fab0903d18..5792e09d7d 100644
--- a/docs-assets/screenshots/schema.js
+++ b/docs-assets/screenshots/schema.js
@@ -25,6 +25,9 @@ export default {
height: 640,
deviceScaleFactor: 3,
},
+ before: async (page) => {
+ await page.hover('#iconButtonAction button')
+ },
},
'actions/trigger-button/danger': {
url: 'actions',
@@ -62,6 +65,42 @@ export default {
deviceScaleFactor: 3,
},
},
+ 'actions/trigger-button/indicator': {
+ url: 'actions',
+ selector: '#indicatorAction',
+ viewport: {
+ width: 1920,
+ height: 640,
+ deviceScaleFactor: 3,
+ },
+ },
+ 'actions/trigger-button/success-indicator': {
+ url: 'actions',
+ selector: '#successIndicatorAction',
+ viewport: {
+ width: 1920,
+ height: 640,
+ deviceScaleFactor: 3,
+ },
+ },
+ 'actions/trigger-button/outlined': {
+ url: 'actions',
+ selector: '#outlinedAction',
+ viewport: {
+ width: 1920,
+ height: 640,
+ deviceScaleFactor: 3,
+ },
+ },
+ 'actions/trigger-button/inline-icon': {
+ url: 'actions',
+ selector: '#inlineIconAction',
+ viewport: {
+ width: 1920,
+ height: 640,
+ deviceScaleFactor: 3,
+ },
+ },
'actions/modal/confirmation': {
url: 'actions',
viewport: {
diff --git a/docs-assets/screenshots/script.js b/docs-assets/screenshots/script.js
index a87f4adc91..603e20c20a 100644
--- a/docs-assets/screenshots/script.js
+++ b/docs-assets/screenshots/script.js
@@ -20,7 +20,9 @@ themes.forEach((theme) => {
}
;(async () => {
- const browser = await puppeteer.launch()
+ const browser = await puppeteer.launch({
+ executablePath: '/opt/homebrew/bin/chromium',
+ })
const page = await browser.newPage()
await page.setViewport(
options.viewport ?? {
diff --git a/packages/actions/docs/03-trigger-button.md b/packages/actions/docs/03-trigger-button.md
index 80923f68ad..2a52b40a2b 100644
--- a/packages/actions/docs/03-trigger-button.md
+++ b/packages/actions/docs/03-trigger-button.md
@@ -49,7 +49,7 @@ Action::make('edit')
->url(fn (): string => route('posts.edit', ['post' => $this->post]))
```
-Optionally, you can have the label automatically translated by using the `translateLabel()` method:
+Optionally, you can have the label automatically translated [using Laravel's localization features](https://laravel.com/docs/localization) by using the `translateLabel()` method:
```php
Action::make('edit')
@@ -66,7 +66,7 @@ Action::make('delete')
->color('danger')
```
-
+
## Setting a size
@@ -118,7 +118,23 @@ Action::make('edit')
This is useful for authorization of certain actions to only users who have permission.
-## Keybindings
+### Disabling a button
+
+If you want to disable a button instead of hiding it, you can use the `disabled()` method:
+
+```php
+Action::make('delete')
+ ->disabled()
+```
+
+You can conditionally disable a button by passing a boolean to it:
+
+```php
+Action::make('delete')
+ ->disabled(! auth()->user()->can('delete', $this->post))
+```
+
+## Registering keybindings
You can attach keyboard shortcuts to trigger buttons. These use the same key codes as [Mousetrap](https://craig.is/killing/mice):
@@ -129,3 +145,88 @@ Action::make('save')
->action(fn () => $this->save())
->keyBindings(['command+s', 'ctrl+s'])
```
+
+## Adding an indicator in the corner of the button
+
+You can add an indicator to the corner of the button, to display whatever you want. It's useful for displaying a count of something, or a status indicator:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('filter')
+ ->iconButton()
+ ->icon('heroicon-m-funnel')
+ ->indicator(5)
+```
+
+
+
+You can also pass a color to be used for the indicator, which can be either `primary`, `secondary`, `success`, `warning` or `danger`:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('filter')
+ ->iconButton()
+ ->icon('heroicon-m-funnel')
+ ->indicator(5)
+ ->indicatorColor('success')
+```
+
+
+
+## Outlined button style
+
+When you're using the "button" trigger style, you might wish to make it less prominent. You could use a different [color](#setting-a-color), but sometimes you might want to make it outlined instead. You can do this with the `outlined()` method:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('edit')
+ ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
+ ->button()
+ ->outlined()
+```
+
+
+
+## Inline icon button style
+
+When you're using the "icon button" trigger style, you might wish to make it fit inline with other content. You can do this with the `inline()` method, which removes the background color when it the button is hovered over:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('edit')
+ ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
+ ->iconButton()
+ ->inline()
+```
+
+
+
+## Passing extra attributes
+
+You can pass extra HTML attributes to the button which will be merged onto the outer DOM element. Pass an array of attributes to the `extraAttributes()` method, where the key is the attribute name and the value is the attribute value:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('edit')
+ ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
+ ->extraAttributes([
+ 'title' => 'Edit this post',
+ ])
+```
+
+If you pass CSS classes in a string, they will be merged with the default classes that already apply to the other HTML element of the button:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('edit')
+ ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
+ ->extraAttributes([
+ 'class' => 'mx-auto my-8',
+ ])
+```
diff --git a/packages/actions/src/Modal/Actions/Action.php b/packages/actions/src/Modal/Actions/Action.php
index 513ad3b4fe..e4ae997e1b 100644
--- a/packages/actions/src/Modal/Actions/Action.php
+++ b/packages/actions/src/Modal/Actions/Action.php
@@ -10,8 +10,6 @@ use Filament\Actions\StaticAction;
class Action extends StaticAction implements SubmitsForm
{
- use CanBeOutlined;
- use CanOpenUrl;
use CanSubmitForm;
use Concerns\CanCancelAction;
use Concerns\HasAction;
diff --git a/packages/actions/src/MountableAction.php b/packages/actions/src/MountableAction.php
index 3dd69a73f6..ed7a420843 100644
--- a/packages/actions/src/MountableAction.php
+++ b/packages/actions/src/MountableAction.php
@@ -10,23 +10,16 @@ use Livewire\Component;
abstract class MountableAction extends StaticAction
{
- use Concerns\CanBeDisabled;
- use CanBeInline;
use Concerns\CanBeMounted;
- use Concerns\CanBeOutlined;
use Concerns\CanNotify;
use Concerns\CanOpenModal;
- use Concerns\CanOpenUrl;
use Concerns\CanRedirect;
use Concerns\CanRequireConfirmation;
use Concerns\HasAction;
use Concerns\HasArguments;
use Concerns\HasForm;
- use Concerns\HasGroupedIcon;
use Concerns\HasInfolist;
- use Concerns\HasKeyBindings;
use Concerns\HasLifecycleHooks;
- use Concerns\HasTooltip;
use Concerns\HasWizard;
protected function setUp(): void
diff --git a/packages/actions/src/StaticAction.php b/packages/actions/src/StaticAction.php
index 75f7afe9fc..70c607f1b0 100644
--- a/packages/actions/src/StaticAction.php
+++ b/packages/actions/src/StaticAction.php
@@ -10,12 +10,18 @@ abstract class StaticAction extends ViewComponent
{
use Concerns\CanBeDisabled;
use Concerns\CanBeHidden;
+ use Concerns\CanBeInline;
+ use Concerns\CanOpenUrl;
use Concerns\HasColor;
+ use Concerns\HasGroupedIcon;
use Concerns\HasIcon;
use Concerns\HasIndicator;
+ use Concerns\HasKeyBindings;
use Concerns\HasLabel;
use Concerns\HasName;
+ use Concerns\CanBeOutlined;
use Concerns\HasSize;
+ use Concerns\HasTooltip;
use Conditionable;
use HasExtraAttributes;
diff --git a/packages/app/src/GlobalSearch/Actions/Action.php b/packages/app/src/GlobalSearch/Actions/Action.php
index c56370ff3f..4350aa0f84 100644
--- a/packages/app/src/GlobalSearch/Actions/Action.php
+++ b/packages/app/src/GlobalSearch/Actions/Action.php
@@ -14,12 +14,7 @@ use Illuminate\Support\Js;
class Action extends StaticAction
{
- use CanBeInline;
- use CanBeOutlined;
use CanEmitEvent;
- use CanOpenUrl;
- use HasKeyBindings;
- use HasTooltip;
protected function setUp(): void
{
diff --git a/packages/notifications/src/Actions/Action.php b/packages/notifications/src/Actions/Action.php
index c628597f4f..029e62fe90 100644
--- a/packages/notifications/src/Actions/Action.php
+++ b/packages/notifications/src/Actions/Action.php
@@ -18,13 +18,8 @@ use Illuminate\Support\Str;
class Action extends StaticAction implements Arrayable, Groupable
{
- use CanBeInline;
- use CanBeOutlined;
use CanCloseNotification;
use CanEmitEvent;
- use CanOpenUrl;
- use HasKeyBindings;
- use HasTooltip;
protected string $viewIdentifier = 'action';