Action menus

Action buttons are always visible at all breakpoints. On mobile they wrap naturally using flex-wrap. No 3-dot kebab menus — all actions are discoverable without a tap.

Action buttons

Use flex flex-wrap gap-x-3 gap-y-2 so buttons wrap gracefully on narrow screens. Resize your browser to see the wrapping.

Q-1001

Sale - 123 High Street

Accept Share

<div class="flex flex-wrap items-center gap-x-3 gap-y-2 shrink-0">
    <a href="#" koala-btn="Primary">Accept</a>
    <a href="#" koala-btn="Secondary">Share</a>
    <button type="button" koala-btn="Danger" koala-btn-variant="Outlined">
        Cancel
    </button>
</div>

Sticky header actions

In sticky headers, action buttons sit alongside the title at all breakpoints. Use flex flex-wrap with gap-x-3 gap-y-2 so they wrap on mobile instead of being hidden behind a menu.

<div koala-sticky-header>
    <div class="flex items-center gap-3 min-w-0">
        <h2 class="text-lg font-semibold ...">Title</h2>
        <span koala-badge="Success" koala-badge-size="Small">Active</span>
    </div>
    <div class="flex flex-wrap items-center gap-x-3 gap-y-2 shrink-0">
        <a href="/new" koala-btn="Primary">New revision</a>
        <button type="button" koala-btn="Danger"
                koala-btn-variant="Outlined">Cancel</button>
    </div>
</div>