Loading…

Action Node

beta

A workflow node card whose round action buttons spring out in an arc around its top-end corner on hover or from a More actions trigger.

Display
2 files
1 npm package
Accessibility notes

Playground

Installation

The CLI installs avatar and tooltip as well, because this component imports them. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add action-node

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ActionNode } from "@/components/ui/action-node";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Controlled
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ActionNode>

Prop	Type	Default
`actions` (required) The fan's buttons; two to four read best.	`ActionNodeAction[]`	—
`heading` (required) The node's name, e.g. "Node 07".	`ReactNode`	—
`bounce` Spring overshoot, 0–100.	`number`	`20`
`corner` Card radius in px; the chip's radius derives from it.	`number`	`20`
`defaultOpen`	`boolean`	`false`
`description`	`ReactNode`	—
`extraCount` Shown after the avatars as "+N".	`number`	`0`
`icon` Decorative icon in the chip beside the heading.	`ReactNode`	—
`onOpenChange`	`(open: boolean) => void`	—
`open` Whether the fan is open (controlled).	`boolean`	—
`people` People shown as overlapping avatars.	`ActionNodePerson[]`	`[]`
`peopleLabel` Names the avatar list.	`string`	`"People"`
`reach` Arc radius in px, 20–40.	`number`	`30`
`stagger` Delay between buttons, 0–100 (about 0.9ms per step).	`number`	`55`
`stroke` Adds a 1px hairline to the card and the buttons.	`boolean`	`false`
`tone`	`"default" \| "inverted"`	`"default"`
`toolbarLabel` The toolbar's accessible name.	`string`	`"Node actions"`
`triggerLabel` The trigger's accessible name.	`string`	`"More actions"`

Plus every attribute of <div> except children.

Accessibility

Hover opens the fan, and so does the "More actions" trigger (aria-expanded, aria-controls), which is revealed on hover and keyboard focus and always shown on devices without hover. Enter, Space or ArrowDown on it open the fan and focus the first action. The fan is role="toolbar" (named by toolbarLabel) with a roving tab stop: the arrow keys move along the arc (Left/Right mirrored in right-to-left layouts) with wrap-around, Home/End jump to the ends, and Escape closes it and returns focus to the trigger. Closed, the fan is inert and aria-hidden, so tucked buttons are neither focusable nor announced. Every action is an icon button named by aria-label and repeated in a tooltip. The hover bridge is aria-hidden; the springs are CSS transitions that settle at once under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

actions

The fan's buttons; two to four read best.

ActionNodeAction[]

—

heading

The node's name, e.g. "Node 07".

ReactNode

—

bounce

Spring overshoot, 0–100.

number

20

corner

Card radius in px; the chip's radius derives from it.

number

20

defaultOpen

boolean

false

description

ReactNode

—

extraCount

Shown after the avatars as "+N".

number

0

icon

Decorative icon in the chip beside the heading.

ReactNode

—

onOpenChange

(open: boolean) => void

—

open

Whether the fan is open (controlled).

boolean

—

people

People shown as overlapping avatars.

ActionNodePerson[]

[]

peopleLabel

Names the avatar list.

string

"People"

reach

Arc radius in px, 20–40.

number

30

stagger

Delay between buttons, 0–100 (about 0.9ms per step).

number

55

stroke

Adds a 1px hairline to the card and the buttons.

boolean

false

tone

"default" | "inverted"

"default"

toolbarLabel

The toolbar's accessible name.

string

"Node actions"

triggerLabel

The trigger's accessible name.

string

"More actions"