Hold confirm action - Filament Flex Fields

Summary

Press-and-hold confirmation for high-risk Filament actions (delete account, purge data, irreversible settings). The user must keep the button pressed until a fill animation completes — a single click does nothing. Accidental taps are blocked; intentional actions feel deliberate.


Class	`Bjanczak\FilamentFlexFields\Filament\Actions\Action`
Extends	`Filament\Actions\Action`
Trait	`CanRequireHoldConfirm`
Enabler	`->holdConfirm()` on the package `Action` class
Assets	Lazy `hold-confirm-action.js` + `hold-confirm-action.css` per rendered action

Important: Import the package action class, not Filament’s base class: use Bjanczak\FilamentFlexFields\Filament\Actions\Action;

When to use it

Pattern	Good for
`->holdConfirm()`	Destructive or irreversible actions where a normal click is too easy to trigger by mistake
`->requiresConfirmation()`	Actions that need an explicit modal “Are you sure?” step
Both together	Rare — pick one UX pattern per action

Hold confirm works in forms, infolists, tables, modals, and ItemCard trailing slots. It supports Livewire action() callbacks and url() navigation.

Quick start

use Bjanczak\FilamentFlexFields\Filament\Actions\Action;

Action::make('delete')
    ->label('Hold to Delete')
    ->color('danger')
    ->icon(Heroicon::OutlinedTrash)
    ->holdConfirm()
    ->action(fn () => $this->deleteRecord());

Defaults: 2000 ms hold, sweep from right, 200 ms release animation, danger-themed palette when color('danger').

How it works

PHP renders the normal Filament button, then wraps label/icon in base and overlay layers (renderHoldConfirmTriggerHtml()).
The action view swaps to filament-flex-fields::actions.hold-confirm and disables the default Livewire click handler.
Alpine holdConfirmActionFormComponent listens for pointer down on the left mouse button / touch.
Progress fills over duration ms using a directional clip-path (sweep).
Releasing early reverses progress over releaseDuration ms.
At 100%, Alpine dispatches fff-hold-complete → $wire.mountAction('…') or navigates to url().

Ordinary click events are suppressed so the action cannot fire without completing the hold.

Configuration catalog

Method	Type / values	Default	Section
`holdConfirm()`	`int` ms, `string` sweep	`2000`, `'right'`	Duration
`holdConfirmSweep()`	`right`, `left`, `up`, `down`	`right`	Sweep direction
`holdConfirmReleaseDuration()`	`int` ms	`200`	Release animation
`holdConfirmThemed()`	`bool`	`true`	Theming
`rounded()`	`none`, `sm`, `md`, `lg`, `xl`, `full`	auto `full` for danger	Rounded corners
`itemCard()`	`bool`	`false`	Item card styling

Inherited Filament APIs (label(), icon(), color(), size(), disabled(), url(), action(), requiresConfirmation(), etc.) work as usual.

Basic usage

Default hold (2 seconds)

Action::make('delete')
    ->label('Hold to Delete')
    ->color('danger')
    ->holdConfirm()
    ->action(fn () => $this->delete());

Custom duration

Action::make('purge')
    ->label('Hold to Purge')
    ->color('danger')
    ->holdConfirm(4000)
    ->action(fn () => $this->purgeCache());

Fast confirmation (800 ms)

Useful for lower-risk actions that still benefit from intentional input:

Action::make('apply')
    ->label('Hold to Apply')
    ->color('primary')
    ->holdConfirm(800)
    ->action(fn () => $this->applySettings());

Sweep direction

The fill animation direction. Second argument to holdConfirm() or via holdConfirmSweep().

`right` (default)

Action::make('delete')
    ->holdConfirm(2000, 'right')
    ->action(fn () => null);

`left`

Action::make('delete')
    ->holdConfirm(2000, 'left')
    ->action(fn () => null);

`up`

Action::make('delete')
    ->holdConfirm(2000, 'up')
    ->action(fn () => null);

`down`

Action::make('delete')
    ->holdConfirm(2000, 'down')
    ->action(fn () => null);

Change sweep after `holdConfirm()`

Action::make('delete')
    ->holdConfirm()
    ->holdConfirmSweep('left')
    ->action(fn () => null);

Invalid values (e.g. 'diagonal') throw InvalidArgumentException.

Release animation

When the user releases before completion, progress animates back to zero.

// Default: 200 ms rewind
Action::make('delete')->holdConfirm();

// Slower rewind (more visible feedback)
Action::make('delete')
    ->holdConfirm()
    ->holdConfirmReleaseDuration(500)
    ->action(fn () => null);

// Snappy rewind
Action::make('delete')
    ->holdConfirm()
    ->holdConfirmReleaseDuration(80)
    ->action(fn () => null);

Theming

When holdConfirmThemed() is enabled (default), color('danger') applies the package danger track/fill palette (fff-hold-confirm-action--palette-danger) and defaults to fully rounded corners.

Danger palette (default for destructive actions)

Action::make('delete')
    ->color('danger')
    ->holdConfirm()
    ->action(fn () => null);

Keep Filament’s native button colors

Action::make('delete')
    ->color('danger')
    ->holdConfirm()
    ->holdConfirmThemed(false)
    ->action(fn () => null);

Primary / success / warning

Themed palette applies only to danger today. Other colors use Filament styling with the hold overlay on top:

Action::make('publish')
    ->color('success')
    ->holdConfirm(1500)
    ->action(fn () => $this->publish());

Rounded corners

Use the package rounded() helper (CanRoundAction):

Action::make('delete')
    ->color('danger')
    ->holdConfirm()
    ->rounded('full')   // default auto-applied for danger hold confirm
    ->action(fn () => null);

Action::make('archive')
    ->holdConfirm()
    ->rounded('lg')
    ->action(fn () => null);

Supported values: none, sm, md, lg, xl, full.

Item card integration

Common pattern: destructive control in an ItemCard trailing slot.

use Bjanczak\FilamentFlexFields\Filament\Actions\Action;
use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCard;
use Bjanczak\FilamentFlexFields\Support\GravityIcon;

ItemCard::make('Delete account')
    ->description('Permanently remove your account and all data')
    ->icon(GravityIcon::TrashBin)
    ->schema([
        Action::make('deleteAccount')
            ->label('Hold to Delete')
            ->color('danger')
            ->icon(GravityIcon::TrashBin)
            ->itemCard()          // compact pill style for card rows
            ->holdConfirm(2000)
            ->action(fn () => $this->deleteAccount()),
    ]),

Combine itemCard() + holdConfirm() for settings-style rows. See the playground Hold confirm hub (/admin/flex-fields-playground/hold-confirm) for standalone action demos, and Item card group for card-embedded actions.

Table actions

use Bjanczak\FilamentFlexFields\Filament\Actions\Action;
use Filament\Tables\Table;

public function table(Table $table): Table
{
    return $table
        ->actions([
            Action::make('delete')
                ->label('Hold to Delete')
                ->color('danger')
                ->icon(Heroicon::OutlinedTrash)
                ->holdConfirm()
                ->action(fn (Post $record) => $record->delete()),
        ]);
}

Works with bulk actions, header actions, and relation managers — anywhere Filament accepts Action instances. Always use the package Action class.

Resource page actions

use Bjanczak\FilamentFlexFields\Filament\Actions\Action;
use Filament\Resources\Pages\EditRecord;

class EditPost extends EditRecord
{
    protected function getHeaderActions(): array
    {
        return [
            Action::make('delete')
                ->label('Hold to Delete')
                ->color('danger')
                ->holdConfirm(3000)
                ->action(fn () => $this->delete()),
        ];
    }
}

URL actions

Hold confirm can navigate instead of calling Livewire:

Action::make('export')
    ->label('Hold to Export')
    ->color('primary')
    ->holdConfirm(1500)
    ->url(fn (): string => route('exports.download', $this->record));

Action::make('docs')
    ->label('Hold to Open Docs')
    ->holdConfirm()
    ->url('https://example.com/docs')
    ->openUrlInNewTab();

Disabled state

When the action is disabled, Alpine receives disabled: true and ignores pointer down:

Action::make('delete')
    ->holdConfirm()
    ->disabled(fn (): bool => ! $this->record->canDelete())
    ->action(fn () => $this->delete());

// Modal — user clicks once, confirms in dialog
Action::make('delete')
    ->requiresConfirmation()
    ->action(fn () => $this->delete());

// Hold — user must press continuously; no extra modal
Action::make('delete')
    ->color('danger')
    ->holdConfirm()
    ->action(fn () => $this->delete());

Choose hold confirm when you want inline, tactile friction without a second step. Choose requiresConfirmation() when you need to show extra context, a checkbox, or typed confirmation in a modal.

Assets & performance

Asset	Loading
`hold-confirm-action.js`	Per-action `@push` `modulepreload` + Alpine `x-load` when action renders
`hold-confirm-action.css`	Lazy via `load-stylesheet` partial when action renders

CSS is not in the global core.css bundle — only actions that call holdConfirm() pull the stylesheet. After upgrading the package, run:

php artisan filament:assets

Accessibility & mobile

Only primary button (event.button === 0) starts a hold; right-click is ignored.
Progress is visual; pair with a clear label() (e.g. “Hold to Delete”).
On supported devices, a short vibration fires when the hold completes.
wire:loading indicators are preserved outside the duplicated label layers.

For critical destructive actions, consider adding helper text in the surrounding UI (ItemCard description, modal heading, etc.).

Playground

FLEX_FIELDS_PLAYGROUND=true

Three hold-confirm demos:

Card	Duration	Sweep	Color
Hold confirm	2000 ms	right	primary
Hold confirm (fast)	800 ms	right	danger
Hold confirm (slow)	4000 ms	left	danger

Open Flex Fields Playground → Hold confirm (/admin/flex-fields-playground/hold-confirm).

API reference

`holdConfirm(int|Closure $duration = 2000, string|Closure $sweep = 'right'): static`

Enables hold-to-confirm, sets duration and sweep, disables Livewire click handler, switches view to hold-confirm. Auto-applies rounded('full') for danger actions when no explicit rounded() was set.

`holdConfirmSweep(string|Closure $sweep): static`

Updates sweep direction: right, left, up, down.

`holdConfirmReleaseDuration(int|Closure $duration): static`

Milliseconds to animate progress back to zero when the user releases early. Default: 200.

`holdConfirmThemed(bool|Closure $themed = true): static`

When true, applies package danger palette for color('danger'). When false, keeps Filament’s default button styling.

Introspection (advanced)

Method	Returns
`hasHoldConfirm()`	Whether hold confirm is active
`getHoldConfirmDuration()`	Hold duration in ms, or `null`
`getHoldConfirmSweep()`	Sweep direction string
`getHoldConfirmReleaseDuration()`	Release duration in ms
`isHoldConfirmThemed()`	Whether themed palette is enabled
`getHoldConfirmPalette()`	`'danger'` or `null`
`getHoldConfirmCompleteExpression()`	JS expression run on complete (testing / debugging)

Component	When to use instead
ItemCard	Trailing `Action` slots and `itemCard()` styling
ItemCardGroup	Grouped settings rows with hold-confirm demos
Filament `Action`	Standard click-to-run without hold delay
Shared concepts	Lazy assets and design tokens

​Summary

​When to use it

​Quick start

​How it works

​Configuration catalog

​Basic usage

​Default hold (2 seconds)

​Custom duration

​Fast confirmation (800 ms)

​Sweep direction

​right (default)

​left

​up

​down

​Change sweep after holdConfirm()

​Release animation

​Theming

​Danger palette (default for destructive actions)

​Keep Filament’s native button colors

​Primary / success / warning

​Rounded corners

​Item card integration

​Table actions

​Resource page actions

​URL actions

​Disabled state

​Comparison with modal confirmation

​Assets & performance

​Accessibility & mobile

​Playground

​API reference

​holdConfirm(int|Closure $duration = 2000, string|Closure $sweep = 'right'): static

​holdConfirmSweep(string|Closure $sweep): static

​holdConfirmReleaseDuration(int|Closure $duration): static

​holdConfirmThemed(bool|Closure $themed = true): static

​Introspection (advanced)

​Related components