videorc/uiPin 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.
Notes
Pin Notes to keep it over other apps while you record.
Installation
$ pnpm dlx shadcn@latest add @videorc/pin-window-buttonUsage
import { PinWindowButton } from "@/components/pin-window-button";<PinWindowButton onPinnedChange={setAlwaysOnTop} pinned={alwaysOnTop} />The window's state comes in through props. In Electron, ask the main process to call setAlwaysOnTop on the window, and pass back what it reports as pinned.
Use it for the one Keep on top control in a detached window: Notes, the Captions reader, Stream Manager. The header look sits in a Window Header.
Don't rename it per window or swap its icon, and don't put it in the main window.
Examples
In a status bar
variant="status-bar" is a Status Bar Action, for a window whose title row stays bare, such as Stream Manager.
Theming
| Token or attribute | Meaning |
|---|---|
Button ghost, size="icon" | The header look |
text-muted-foreground | Unpinned reads a tier quieter; hover brightens it |
PinIcon | Regular while unpinned, filled while pinned |
[-webkit-app-region:no-drag] | Clickable on a header's drag band |
data-testid="pin-window-button" | On the button, in either look |
Keyboard
| Key | Action |
|---|---|
Enter, Space | Pins or unpins the window |
Accessibility
It's named "Keep on top" (PIN_WINDOW_LABEL) in every window, with aria-pressed saying whether the window is pinned. A tooltip shows the name on hover, never a native title. Base UI's Tooltip needs no provider, so the button works in a window that has none; under one, it joins that window's delay group.
API reference
Prop
Type
PIN_WINDOW_LABEL is the control's one name, "Keep on top".
Status 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.
Theme Toggle
The light and dark switch. A ghost icon button with D as its shortcut, shown in its tooltip; a flip back to the computer's own look returns to System.