Skip to content
neoncite
All components
primitives

Button

Machined button with neon variants and pressed state.

Canonical source

Preview

This newly registered component is fully installable and documented. Its dedicated interactive showcase is generated in the extended preview pass; use the canonical source and API contract below in the meantime.

Installation

$bash
npx neoncite@latest add button

Dependencies

@radix-ui/react-slotclass-variance-authorityframer-motion

API Reference

PropTypeDefaultDescription
classNamestring—Extends the Neoncite classes without replacing semantic behavior.
…native / primitive propsvaries—Forwards the underlying Radix primitive props unless the component API documents a narrower contract.

States

  • • default
  • • hover
  • • focus-visible
  • • disabled where supported

Accessibility

  • • Behavior is built on the corresponding Radix primitive; preserve its trigger/content relationships and required labels when composing.
  • • Neoncite focus-visible treatment must remain visible against OLED surfaces.
  • • Decorative glow, scan, pulse, and transition effects must not be the only indication of state.
  • • All non-essential animation must respect prefers-reduced-motion.

Keyboard interactions

Tab / Shift+TabMoves focus through interactive controls in document order.
Enter / SpaceActivates the focused control when supported by its native or primitive semantics.
EscapeCloses dismissible overlay content and restores focus when the underlying Radix primitive supports it.
Arrow keysMoves within composite widgets such as menus, radio groups, tabs, navigation, and selectable lists where defined by the primitive.

Composition

  • • Install with `npx neoncite add button`; registry dependencies are resolved recursively.
  • • Can be composed with other Neoncite primitives without a private styling runtime.

Token contract

--surface-0…3--hairline--foreground--muted-foreground--primary / --ringsemantic neon/glow tokens where used

SSR / hydration

No special SSR requirement beyond the underlying React/Radix dependency. Interactive client components are marked where required.

RTL

Follow the underlying primitive's direction support. Verify placement-specific styling when using RTL.