Action menus

On desktop, action buttons are shown inline. On mobile, they collapse into a 3-dot kebab dropdown menu. This pattern is used on detail pages (view quote, view user) to keep the header compact on small screens.

Responsive action buttons

Desktop shows inline buttons with hidden sm:inline-flex. Mobile shows a 3-dot icon with sm:hidden. The dropdown includes regular items and a destructive (red) item at the bottom. Resize your browser to see both states.

Q-1001

Sale - 123 High Street

Accept Share

<div class="flex items-center gap-3">
    <!-- Desktop buttons -->
    <a href="#" koala-btn="Primary" class="hidden sm:inline-flex">Accept</a>
    <a href="#" koala-btn="Secondary" class="hidden sm:inline-flex">Share</a>
    <button type="button" koala-btn="Danger" koala-btn-variant="Outlined"
            class="hidden sm:inline-flex">Cancel</button>

    <!-- Mobile dropdown -->
    <div class="relative sm:hidden shrink-0" x-data="{ menuOpen: false }">
        <button type="button"
                x-on:click="menuOpen = !menuOpen"
                class="p-2 text-gray-500 hover:text-gray-700
                       dark:text-gray-400 dark:hover:text-gray-200">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                 stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="1"></circle>
                <circle cx="12" cy="5" r="1"></circle>
                <circle cx="12" cy="19" r="1"></circle>
            </svg>
        </button>
        <div x-show="menuOpen"
             x-on:click.outside="menuOpen = false"
             x-on:keydown.escape.window="menuOpen = false"
             x-transition:enter="transition ease-out duration-100"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-75"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-95"
             x-cloak
             class="absolute right-0 top-full mt-1 w-44 bg-white dark:bg-gray-700
                    border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg z-10">
            <ul class="py-1">
                <li>
                    <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200
                                      hover:bg-gray-100 dark:hover:bg-gray-600">Accept</a>
                </li>
                <li>
                    <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200
                                      hover:bg-gray-100 dark:hover:bg-gray-600">Share</a>
                </li>
                <li>
                    <button type="button"
                            class="w-full text-left px-4 py-2 text-red-600 dark:text-red-400
                                   hover:bg-gray-100 dark:hover:bg-gray-600">Cancel</button>
                </li>
            </ul>
        </div>
    </div>
</div>

Transition attributes

Always use the same Alpine.js transition attributes for consistent open/close animation across all dropdown menus.

x-show="menuOpen"
x-on:click.outside="menuOpen = false"
x-on:keydown.escape.window="menuOpen = false"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
x-cloak