Components Action menus

Action menus

Inline action rows. Composition of <koala-btn> in a flex-wrap row — not a dedicated tag helper. Used in list rows, sticky headers, and detail-page action bars. Wraps onto a second row on narrow widths so nothing hides behind a tap.

<koala-btn> composition

Canonical

Accept Share

Primary action on the right edge. Pair with one or two supporting actions of lower visual weight. The destructive action sits furthest from the primary — never adjacent to it.

Variants

3 variants

Save

Two actions — Primary + Outline

flex flex-wrap gap-x-3 gap-y-2

Accept Share

Three actions — Primary + Outline + Danger

destructive sits furthest from primary

Accept Share Duplicate

Four actions — wraps to two rows on narrow widths

flex-wrap keeps every action visible

States

3 states

Q-1001 — Sale

123 High Street, London

Accept Share

In a list row

123 High Street

Active

New revision

In a sticky header

Submitting — primary shows spinner, all disabled

Pattern

composition

Action menus aren't a single helper — they're a flex-wrap row of <koala-btn>. The wrapper carries the layout classes; each button carries its own colour and variant.

Class	Notes
flex flex-wrap items-center	Row layout. `flex-wrap` lets the actions move to a second row on narrow widths.
gap-x-3 gap-y-2	Horizontal gap matches button-bar spacing; vertical gap tightens up when the row wraps.
shrink-0	Inside a list row or sticky header, prevents the action group from squashing as the row narrows.
justify-end	Right-align the action group on detail pages; omit inside list rows that use `justify-between` at the parent.

Do & don't

Accept Share

Do Show every action inline with flex-wrap. Actions wrap to a second row on narrow screens — nothing hides behind a tap.

Don't Don't bury actions behind a 3-dot kebab. Visibility beats density — if the row has 4+ actions, let them wrap.