# Action Menu Button

> A round plus button that unfolds into a stack of labelled actions: the plus turns into a cross and each action springs out in turn.

Category: Buttons · MotionKit Plus · Updated 2026-10-30 · Live demo: https://www.motionkitui.com/components/action-menu-button

## When to use it

Mobile apps, dashboards and editors: a floating create button that offers a few related actions without a full toolbar.

## How it works

It follows the WAI-ARIA menu button pattern. Opening the menu rotates the plus 135 degrees into a cross on a spring, and each action springs out with a short stagger. Focus moves to the first action, the arrow keys move between them, Escape closes the menu and returns focus to the button, and a click anywhere else closes it too.

## Installation

Part of MotionKit Plus (https://www.motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/action-menu-button` after adding their registry token from https://www.motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `actions` | `MenuAction[]` |  | Each action's label, icon and onSelect. |
| `label` | `string` | `"Create"` | Accessible name of the button and menu. |
| `direction` | `"up" \| "down"` | `"up"` | Which way the actions unfold. |
| `accent` | `string` | `"#0E7C86"` | Colour of the main button. |

## Accessibility

- **Keyboard: Pass.** A WAI-ARIA menu button: opening moves focus to the first action, arrow keys move between them, Escape closes and returns focus.
- **Screen readers: Pass.** The button announces its label and whether the menu is expanded; actions are menu items with their labels.
- **Reduced motion: Pass.** With reduced motion on, actions fade in without springing and the plus turns instantly.
- **Colour contrast: Pass.** Action labels measure 15.5:1; the plus icon on the button 4.9:1.