videorc/uiStatus Bar Action
One action in a status bar. An icon, a word or both, with its shortcut, named for assistive tech and on hover by a tooltip, never a native title. It can be a toggle, or a menu's trigger.
Chat from YouTube and Twitch shows up here while you're live.
Installation
$ pnpm dlx shadcn@latest add @videorc/status-bar-actionUsage
import { StatusBarAction } from "@/components/status-bar-action";<StatusBarAction
accelerator="CmdOrCtrl+Shift+C"
icon={<ClipIcon aria-hidden />}
label="Save a clip"
text="Clip"
/>Use it for a control in a Status Bar that isn't a window's shortcut hint: an icon action, a toggle, a menu. It's its own module, so a status bar of hints alone never loads its Tooltip.
Don't use it outside a status bar, where a control is a Button. Don't give it a title: label names it, and the tooltip shows the name or the hint.
The tooltip follows what the action shows:
| It shows | Its tooltip |
|---|---|
| An icon alone | The label |
A word (text) | None: the word says it |
Anything, with a hint | The hint, which is also the button's description |
As a menu trigger
Its props spread onto the button, so it can be a menu trigger's render. The demo's clip length does this:
<DropdownMenu>
<DropdownMenuTrigger
render={<StatusBarAction label="Clip length" text="30 s" />}
/>
<DropdownMenuContent side="top">…</DropdownMenuContent>
</DropdownMenu>Theming
| Token or attribute | Meaning |
|---|---|
STATUS_BAR_ACTION_CLASS | 20 px, 11 px tertiary text that brightens on hover, 14 px icons |
aria-pressed:text-foreground | A toggle that's on |
text-muted-foreground | The shortcut, a step above the word |
data-slot="status-bar-action" | The button, kept when a trigger renders it |
data-popup-open | While its menu or tooltip is open, from Base UI |
Keyboard
| Key | Action |
|---|---|
Tab | Moves to the action and shows its tooltip |
Enter, Space | Runs it, toggles it, or opens its menu |
Accessibility
label is the button's aria-label, so an icon alone is still named; pass icons with aria-hidden. A hint becomes the button's aria-description as well as its tooltip. pressed sets aria-pressed for a toggle.
API reference
Every button attribute except children and title, plus:
Prop
Type
Status Bar
The window's 26 px status bar. The session state on the left, and quiet shortcut hints on the right that stay clickable, each pressed while the window it opens is open.
Pin Window Button
Keep on top, the pin every detached window shares. One name in every window, a filled pin while the window stays over other apps, a pressed state a screen reader hears, and a header or a status-bar look.