Action Rail
Freev1.0.0A row of icon actions where labels appear on hover or focus and each confirms in place.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { ActionRail } from "@/components/ui/notchset/action-rail";
export function MessageActions({ reply, archive, remove }: { reply: () => void; archive: () => void; remove: () => void }) {
return (
<ActionRail
aria-label="Message actions"
actions={[
{ id: "reply", label: "REPLY", icon: <span>↩</span>, intent: "primary", onSelect: reply },
{ id: "archive", label: "ARCHIVE", icon: <span>▤</span>, doneLabel: "ARCHIVED", onSelect: () => (archive(), "MOVED TO ARCHIVE") },
{ id: "delete", label: "DELETE", icon: <span>✕</span>, intent: "danger", doneLabel: "DELETED", onSelect: () => (remove(), "MOVED TO TRASH") },
]}
/>
);
}Props
actions–{ id, label, icon, doneLabel?, intent?, pressed?, onSelect? }[]In order; the primary (intent "primary") keeps its name. onSelect may return a sentence for the status line.
intent–"primary" | "danger" | "toggle"Primary is ink and always named; danger asks twice; toggle reports aria-pressed from `pressed`.
confirmDelete–booleanDanger actions ask twice. Default true.
status–booleanThe status line under the rail. Default true.
labels–{ armed, armedStatus, cancelled, hint }Every word, for other languages.
Anatomy
- The Notchset instrument parts: plate and glyph flip.
- Native buttons in a roving toolbar; one file serves both builds.
- Plays signal, confirm and done through beautiful-ui-sound.
ActionRaildata-slot="action-rail"The keys on their plate and the status line.
Keydata-slot="action-rail-key"One action: icon, travelling label and its result.
Source
components/ui/notchset/action-rail.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/action-rail.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/action-rail.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/action-rail.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A compact action bar on a message, a file or a card, where labels should be one glance away
- Actions that finish in place and deserve a confirmation without a toast (Archive, Copy link)
Use something else when
- Choosing a value: use Segmented Control or Toggle
- One or two actions with room to spare: plain labelled buttons read faster
- More than about six actions: use a Dropdown Menu
Mistakes to avoid
- Put the primary first: the label rests on it
- Keep labels to one or two words: they slide out, they don't wrap
- Return a short sentence from onSelect when the result carries news
Agents find it by
- expanding button group, action bar, row actions, message actions, file actions, icon buttons with labels, two-step delete, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/action-rail.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ← → / Home End
- Move between keys
- Enter / Space
- Run; on Delete, arm then delete
- Esc
- Cancel an armed delete
Accessibility
- A toolbar with one tab stop; ← → move between keys, Home and End jump to the ends
- Every key is named by its action; an armed delete says to press again; toggles report aria-pressed
- The status line is a polite live region
Motion
- Travel
- The active key's label widens from nothing to its width (360ms glide); the text fades in after 120ms and out in 100ms
- Press
- The content moves down 1px (90ms linear)
- Done
- The label flips to the past tense for 1.6s
- Arm
- The key fills with signal and the plate turns signal; it disarms after 3s
Responsive
- Folded keys are 40px squares, so a rail of five is the primary's label plus 160px.
- 44px keys on touch screens.
Performance
- One measurement per label change; the travel is a width transition.
Changelog
v1.0.0 · 2026-10-03
First release
