docs

docs-assets/app/resources/views/livewire/actions.blade.php

@@ -1,5 +1,9 @@
-@php use Filament\Actions\ActionGroup; @endphp
-@php use Filament\Actions\Action; @endphp
+@php
+    use Filament\Actions\Action;
+    use Filament\Actions\ActionGroup;
+    use Filament\Support\Icons\Heroicon;
+@endphp
+
 <div class="min-h-screen">
     @if (! count($this->mountedActions))
         <div id="buttonAction" class="p-16 flex items-center justify-center max-w-xl">
@@ -86,27 +90,40 @@
                     Action::make('delete'),
                 ]"
                 label="More actions"
-                :icon="\Filament\Support\Icons\Heroicon::EllipsisVertical"
+                :icon="Heroicon::EllipsisVertical"
                 size="sm"
                 color="primary"
                 button
             />
         </div>
 
+        <div id="actionButtonGroup" class="p-16 flex items-center justify-center max-w-xl">
+            {{ ActionGroup::make([
+                Action::make('edit')
+                    ->color('gray')
+                    ->icon(Heroicon::PencilSquare)
+                    ->hiddenLabel(),
+                Action::make('delete')
+                    ->color('gray')
+                    ->icon(Heroicon::Trash)
+                    ->hiddenLabel(),
+            ])->buttonGroup() }}
+        </div>
+
         <div id="actionGroupPlacement" class="pr-40 pb-8 pt-40 flex items-center justify-center max-w-xl">
             <x-filament-actions::group
-                    :actions="[
+                :actions="[
                     Action::make('view'),
                     Action::make('edit'),
                     Action::make('delete'),
                 ]"
-                    dropdown-placement="top-start"
+                dropdown-placement="top-start"
             />
         </div>
 
         <div id="nestedActionGroups" class="pr-40 pt-8 pb-40 flex items-center justify-center max-w-xl">
             <x-filament-actions::group
-                    :actions="[
+                :actions="[
                     ActionGroup::make([
                         Action::make('view'),
                         Action::make('edit'),

docs-assets/screenshots/schema.js

@@ -231,6 +231,15 @@ export default {
             await new Promise((resolve) => setTimeout(resolve, 500))
         },
     },
+    'actions/group/button-group': {
+        url: 'actions',
+        selector: '#actionButtonGroup',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
     'actions/group/placement': {
         url: 'actions',
         selector: '#actionGroupPlacement',

packages/actions/docs/03-grouping-actions.md

@@ -45,6 +45,28 @@ ActionGroup::make([
 
 <AutoScreenshot name="tables/actions/group-button" alt="Table with button action group" version="4.x" />
 
+### Using a grouped button design
+
+Instead of a dropdown, an action group can render itself as a group of buttons. This design works with and without button labels. To use this feature, use the `buttonGroup()` method:
+
+```php
+use Filament\Actions\Action;
+use Filament\Actions\ActionGroup;
+use Filament\Support\Icons\Heroicon;
+
+ActionGroup::make([
+    Action::make('edit')
+        ->color('gray')
+        ->icon(Heroicon::PencilSquare)
+        ->hiddenLabel(),
+    Action::make('delete')
+        ->color('gray')
+        ->icon(Heroicon::Trash)
+        ->hiddenLabel(),
+])
+    ->buttonGroup()
+```
+
 ## Setting the placement of the dropdown
 
 The dropdown may be positioned relative to the trigger button by using the `dropdownPlacement()` method: