QuickActions
A row of small soft buttons for the things people do most on a page, folding into a menu when they don't fit.
import { QuickActions } from "@butteryui/react";Demo
Last pressed: Nothing yet
When to use it
Use it for
- Two to five frequent actions under an app page's header
- Shortcuts on an overview, such as New order or Send invoices
Not for
- The page's one main action: put a primary PageHeader.Action in the header
- Actions on one row of a table: use a row actions menu
Examples
Narrow shortcuts
More actions than room: the lowest priority ones fold into the More quick actions menu, where they still run.
Last: Nothing yet
Order shortcuts
The few things people do most on an orders page, in one row of small soft buttons.
Last: Nothing yet
Today overview
Under an overview page's header, the day's shortcuts, each changing the page under them.
Today
2 orders to pack and 1 roast planned
#1044 · Larkspur Café · to pack
#1045 · Northgate Bakery · to pack
Variants and states
Quick actions
Small soft buttons 8px apart; narrow the page and the lowest priority ones fold into the … menu.
Props
QuickActions
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Quick actions" | Names the group for screen readers. Defaults to "Quick actions". |
moreLabel | string | "More quick actions" | Names the button that lists the actions that don't fit. Defaults to "More quick actions". |
It also takes Omit<ComponentPropsWithRef<"div">, "aria-label">.
QuickActions.Action
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | What it does, such as "New order". The row and the menu both show it. | |
onSelectrequired | () => void | Runs the action, from the row or from the "…" menu. | |
icon | ComponentType<IconComponentProps> | An icon before the label. | |
disabled | boolean | Keeps it from being chosen; its button stays focusable (aria-disabled). | |
priority | number | 0 | Higher stays in the row longer. Defaults to 0. |
Accessibility
A group named Quick actions (or its label) of buttons; a disabled action stays focusable. Actions folded into the menu stay reachable from the More quick actions button.
| Keys | What they do |
|---|---|
| Enter or Space | Runs the focused action, or opens More quick actions with the ones that don't fit; a disabled action keeps focus and does nothing |
| Arrow keys | Move through More quick actions while it's open |
| Escape | Closes More quick actions and puts focus back on its button |
Motion
It scales to 97% while it's pressed, over `--bt-dur-press`, and springs back when it's let go.
With reduced motion: Its buttons press in at once.
Layout
It takes its container's width as one row of 28px soft buttons (--bt-h-sm), 8px apart, that never wraps: as the row narrows the lowest-priority actions fold into More quick actions, and they come back as it grows. Each button keeps its label whole, and its 28px height is its hit area.
Related
See it in the roastery demo's payouts.