Glow Button
glow-buttonControlsLit performance and console buttons whose glow can follow the music.
$ pnpm dlx shadcn@latest add @pluginui/core-glow-buttonInstall
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-glow-button.jsonUsage
Connect the documented props to your application or host.
import { GlowButton } from "@/components/ui/glow-button"
// The audio-start button: resume the context synchronously inside the
// first gesture, the only point when browsers allow it.
<GlowButton
mode="toggle"
size={160}
onInteraction={() => audioContext.resume()}
onPressedChange={(on) => (on ? transport.start() : transport.stop())}
>
Play
</GlowButton>
// Side-chain the light to the music: feed the halo an audio level.
const [level, setLevel] = useState(0) // 0..1, from an AnalyserNode loop
<GlowButton mode="toggle" glow={playing ? level : undefined} pulse={{ bpm: 124 }}>
Drop
</GlowButton>About Glow Button
One component covers large performance controls and compact vintage console buttons. Round and pill caps use an LED bezel with a layered halo; console-round and console-square use a machined bezel, recessed face and restrained indicator bloom. Every style can be momentary or latching with real button semantics underneath. The glow prop can still be fed from an audio level, and onInteraction fires synchronously inside the first gesture, which makes it the natural place to resume a suspended AudioContext.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "momentary" | "toggle" | "momentary" | Lit while held and firing onPress/onRelease, or latching with aria-pressed. |
| pressed | boolean | — | Controlled latched state (toggle mode). Omit for uncontrolled operation. |
| defaultPressed | boolean | false | Initial latched state when uncontrolled (toggle mode). |
| onPressedChange | (pressed: boolean) => void | — | Fires on every latch change (toggle mode), controlled or not. |
| onPress / onRelease | (event) => void | — | In momentary mode, reports when the push begins and ends, including when the pointer is dragged off the cap. |
| onInteraction | (event) => void | — | Fires once, synchronously inside the first gesture of any kind. Use it to resume a suspended AudioContext. |
| glow | number | — | External halo intensity, 0..1. It takes over the bloom completely: pass an audio level each frame to make the light follow the music. This overrides pulse and the lit/idle logic. The value is clamped so a hot level cannot blow the layers up. |
| pulse | { bpm: number } | — | Make the idle halo hit on the beat. rAF-driven with no re-renders, off by default, and skipped under prefers-reduced-motion. |
| children | ReactNode | — | Text or glyph centred on the cap. Doubles as the accessible name. |
| variant | "round" | "pill" | "console-round" | "console-square" | "round" | Large round or pill performance controls, plus compact round or square machined-console faces. |
| size | number | 140 / 52 | Cap diameter (round/square) or height (pill), in pixels. Console variants default to 52; performance variants default to 140. |
| color | string | — | Halo and LED colour. Defaults to the --uikit-accent token. |
| disabled | boolean | false | Block interaction, kill the glow and dim the control. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.