Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/sys.witch-v2/llms.txt

Use this file to discover all available pages before exploring further.

GlyphButton is the site’s primary interactive element — a styled button using JetBrains Mono in uppercase with wide letter-spacing, available in solid, outline, and ghost variants across all four neon colors. It optionally renders a Sigil icon alongside the label using the sigilId prop.

​
Props

​
color
'purple' | 'magenta' | 'cyan' | 'lime'
required
Sets the neon color for the button’s fill (solid) or border and text (outline/ghost).
​
variant
'solid' | 'outline' | 'ghost'
required
Controls the button’s visual style:
  • solid — fills the background at 20% neon opacity at rest and transitions to full neon fill on hover, setting the text to --bg-base for contrast.
  • outline — transparent background with a 50%-opacity neon border and matching neon text; border and a light neon background tint appear on hover.
  • ghost — no border, neon-colored text only; adds a subtle neon background tint on hover.
​
sigilId
string
When provided, renders a <Sigil> icon at size 18 before the button label, using the same color as the button. In solid variant, the sigil stroke transitions to --bg-base on hover to match the label color.
​
fullWidth
boolean
Adds w-full to the button, causing it to span 100% of its container width. Defaults to false.
​
type
string
The HTML type attribute for the underlying <button> element. Accepts 'button', 'submit', or 'reset'. Defaults to the browser default ('submit' inside a <form>, 'button' otherwise).
​
disabled
boolean
Disables the button, preventing interaction. Passed directly to the underlying <button> element, which applies the browser’s default disabled styling.
​
onClick
function
Click event handler passed directly to the underlying <button> element.
​
className
string
Additional Tailwind or CSS classes merged onto the root element.
​
children
ReactNode
The button’s label content. Rendered in uppercase monospace with wide letter-spacing.

​
Variants

import { GlyphButton } from './components/ui/GlyphButton.js';

// Solid variant — primary CTA
<GlyphButton color="magenta" variant="solid" onClick={() => window.open(demoUrl)}>
  Summon Demo
</GlyphButton>

// Outline variant — secondary action
<GlyphButton color="purple" variant="outline" onClick={() => window.open(sourceUrl)}>
  Reveal Source
</GlyphButton>

// Ghost variant — tertiary / low-emphasis action
<GlyphButton color="cyan" variant="ghost">
  Dismiss
</GlyphButton>

// With sigil icon
<GlyphButton color="lime" variant="solid" sigilId="projects">
  View Projects
</GlyphButton>

// Submit button for form
<GlyphButton type="submit" color="magenta" variant="solid" fullWidth disabled={isSubmitting}>
  {isSubmitting ? 'Channeling...' : 'Send The Signal'}
</GlyphButton>

// Full-width outline
<GlyphButton color="cyan" variant="outline" fullWidth>
  Inspect Readme
</GlyphButton>

​
Hover State

On hover, GlyphButton intensifies the shadow-glow-* shadow for the active color and transitions the border and background to their full neon values. The solid variant fills to the full neon color and inverts the text to --bg-base. A subtle scan-line overlay animates across the button face using a CSS keyframe animation.

​
Disabled State

When disabled is true, the button becomes non-interactive — pointer events are suppressed and the element renders at reduced opacity via the browser’s native disabled styling. This is used in form contexts (e.g., SummoningForm) while an async submission is in flight, preventing duplicate submissions.
Follow the project convention: use solid for the primary or most important action in a given context, outline for secondary actions, and ghost for low-emphasis or dismissal actions. Mixing too many solid buttons in one area creates visual noise.

Build docs developers (and LLMs) love

Get started for freeTalk to us