Buttons & actions
Neon Edge Button
Precise travelling edge light button
detent-neon-edge-button
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 2
- Wave
- phase-2-controls
- Group
- Buttons & actions
2.7 KB gzip for the class module
Variants
default (speed 1)
Publish release
speed 2 / 0.5
Fast sweep
Slow sweep
slot fallback
glow opt-out
disabled
Unavailable
Fast, disabled
Recorded states
focus-visiblerecorded state; no setterdisabledrecorded state; no setterreduced motionrecorded state; no setter
Usage
Import
import '/components/neon-edge-button/define.js';
// or register it yourself
import { DetentNeonEdgeButton } from '/components/neon-edge-button/neon-edge-button.js';Attributes
disabledglowspeed
Properties
No properties are recorded for this component.
Slots
default
Events
No events are recorded for this component.
Example
Runnable example: site/examples/neon-edge-button.ts. The snippet below is generated from the catalogued attributes.
<detent-neon-edge-button
disabled
glow
speed="1"
></detent-neon-edge-button>Source
The pinned upstream source for this row:
src/components/ui/NeonEdgeButton.tsxsha256 276e9a8b2677…
Native files
The native module and its artifacts:
src/components/neon-edge-button/neon-edge-button.tssrc/components/neon-edge-button/styles.csssrc/components/neon-edge-button/define.tsdocs/components/neon-edge-button.mdsite/examples/neon-edge-button.tstests/browser/neon-edge-button.spec.tsevidence/components/neon-edge-button.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
disabled | — | — | — | Recorded in the catalog as an attribute. |
glow | glow | boolean | true | Presence semantics: present means true, absent means false. |
speed | speed | number | 1 | Kebab-case attribute; camelCase property. |
Properties
No property-only values are recorded for this component.
Events
No custom events are recorded for this component.
Slots
| Slot | Notes |
|---|---|
default | Consumer content; rendered through a slot, never re-created. |
CSS customisation
- React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
- `lucide-react` icon components replaced with local SVG assets (ISC notice retained).
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- Upstream's #050505/#FAFAFA/white-beam dark-only palette is replaced by theme tokens (--detent-color-surface-raised, --detent-color-text, a color-mix beam highlight), so the control is legible in light and dark (PC-9.5).
- `children` becomes the default slot and the recorded default 'Deploy preview' becomes its fallback text (PC-11.1/11.2).
- `speed` publishes --detent-neon-duration (3 / speed seconds) instead of an inline animation string; behaviour is identical.
- The upstream Tailwind focus-ring utility becomes a 2px --detent-color-accent outline (PC-9.2/9.7).
- The travelling light is one rotating transform on the beam element (CSS only), not a per-instance inline style block.
What it does
A primary action whose light source travels around a 1px perimeter ring while the label stays the most readable thing on the control. One real <button>, one CSS animation, no framework.
Upstream behaviour
- Travelling light follows the button perimeter instead of animating border color
- Neutral glow keeps the effect aligned with EasyUI surfaces
- Still reads as a polished button when motion is disabled
Differences from upstream
- React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
- `lucide-react` icon components replaced with local SVG assets (ISC notice retained).
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- Upstream's #050505/#FAFAFA/white-beam dark-only palette is replaced by theme tokens (--detent-color-surface-raised, --detent-color-text, a color-mix beam highlight), so the control is legible in light and dark (PC-9.5).
- `children` becomes the default slot and the recorded default 'Deploy preview' becomes its fallback text (PC-11.1/11.2).
- `speed` publishes --detent-neon-duration (3 / speed seconds) instead of an inline animation string; behaviour is identical.
- The upstream Tailwind focus-ring utility becomes a 2px --detent-color-accent outline (PC-9.2/9.7).
- The travelling light is one rotating transform on the beam element (CSS only), not a per-instance inline style block.