Cyber Button

Cut corners, a corner tick and a glitch on hover.

Relay found in sector 4

Node 07 stable

Signal at 82%. Handshake takes about four seconds.

Installation

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

import { CyberButton } from "@/components/ui/cyber-button"

<CyberButton variant="solid">Connect</CyberButton>

32, 40 and 48px tall like Button; the chamfer grows with the size.

colorAlt sets the second channel of the glitch.

Also accepts every native button attribute. The ref points at the button (or the asChild element).

Prop	Type	Default
`variant`	`"outline" \| "solid"` Dark face with a lit frame, or a lit face.	`"outline"`
`size`	`"sm" \| "md" \| "lg"` 32, 40 or 48px tall, with a 7, 9 or 11px chamfer.	`"md"`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited
`colorAlt`	`NeonColor` Second channel of the RGB split on hover.	`"magenta"`
`scanDuration`	`number` Seconds between passes of the scan line. 0 turns it off.	`3.6`
`asChild`	`boolean` Render the child element (a link, say) with the frame and merge props onto it.	`false`
`disabled`	`boolean` Dims the button and blocks clicks. With asChild it sets aria-disabled and removes it from the tab order.	`false`

Labels render uppercase with wide tracking. Screen readers get the text as written; the glitch copies are aria-hidden.
The focus ring follows the chamfer: same width, offset and color as Button's ring.
The glitch plays once per hover, only on devices that can hover, and never under prefers-reduced-motion. The scan line is hidden there too.
The chamfer is a clip-path, so put shadows on a wrapper with filter: drop-shadow rather than box-shadow on the button.