Power Button

A round power key that ignites with a flickering ring.

Monitor A230 V · 50 Hz

StandbyLive

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/power-button.json

import { PowerButton } from "@/components/ui/power-button"

<PowerButton pressed={on} onPressedChange={setOn} aria-label="Monitor power" />

Give each key its own color and swap the power glyph for any icon. It lights with the ring.

Controlled, named by the row title with aria-labelledby.

sm, md and lg match Button's heights; xl is a 72px feature key.

Also accepts native button attributes except children. The ref points at the button.

Prop	Type	Default
`pressed`	`boolean` On or off, when controlled.	None
`defaultPressed`	`boolean` Initial state when uncontrolled.	`false`
`onPressedChange`	`(pressed: boolean) => void` Called with the new state when the key is pressed.	None
`size`	`"sm" \| "md" \| "lg" \| "xl"` Diameter: 32, 40, 48 or 72px.	`"md"`
`icon`	`ReactNode` Replaces the glyph on the cap. It inherits the tube color through currentColor and is drawn a step larger with a 2.25 stroke so it reads inside the cap.	power glyph
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited
`name`	`string` Submits value under this name while on, like a native checkbox.	None
`value`	`string` Submitted with name while on.	`"on"`
`disabled`	`boolean` Dims the key and blocks presses.	`false`

A toggle button: aria-pressed reflects the state, and Enter or Space toggles it.
Without aria-label or aria-labelledby it is named "Power". Name it after what it powers when there is more than one.
The ignition plays only when the key turns on; a key that is already on when it mounts stays steady.
Under prefers-reduced-motion the ring fades on without flickering.