Button Component

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/buttons/Button.tsx
• src/provider/index.tsx
• src/theme/colors.ts
• src/theme/tokens.ts
• package.json
• src/index.ts

The Button component is a core interactive element within the @pcstyle/ui design system. It is designed to provide a highly stylized, theme-responsive interface that supports two distinct visual modes: cyber and minimal. The component leverages framer-motion for interactive animations and integrates deeply with the project's central theme provider to ensure consistent branding across the library.

Sources: src/components/buttons/Button.tsx:1-12, package.json:1-25, src/index.ts:1-12

Component Architecture

The Button is implemented as a functional React component that extends the standard HTMLMotionProps<"button">. This allows it to inherit all standard HTML button attributes while also providing access to the animation capabilities of the framer-motion library.

Theme Integration

The component consumes the UIContext via the useUI hook to determine the current active theme. This context determines whether the button renders with "Cyber" (aggressive, neon, high-contrast) or "Minimal" (clean, modern, grayscale) styles.

The diagram shows how the theme state flows from the provider into the component to toggle visual styles.
Sources: src/components/buttons/Button.tsx:21-23, src/provider/index.tsx:7-45

Properties and Configuration

The component is configured through a structured set of TypeScript interfaces, ensuring type safety for variants, sizes, and states.

Prop	Type	Default	Description
children	React.ReactNode	undefined	The content to be displayed inside the button.
variant	"primary" | "secondary" | "outline" | "ghost"	"primary"	The visual style variation of the button.
size	"sm" | "md" | "lg"	"md"	The physical dimensions and padding of the button.
loading	boolean	false	If true, shows a spinner and disables user interaction.
disabled	boolean	false	Standard HTML disabled state.

Sources: src/components/buttons/Button.tsx:8-14, src/components/buttons/Button.tsx:21-27

Visual Styling and Themes

The component uses a tiered styling system combining base utility classes with theme-specific overrides.

Styling Logic

1. Base Styles: Includes layout properties like inline-flex, items-center, and typography settings such as font-mono and uppercase.
2. Size Styles: Controlled via a map that defines padding and font sizes based on the size prop.
3. Theme Styles: Specific color palettes and shadow effects defined in cyberStyles and minimalStyles.

Typography and Tokens

Button labels utilize the design system's tokens, specifically the mono font family and widest letter spacing (0.4em).

Token Category	Value	Source
Font Family	"JetBrains Mono", "Fira Code", monospace	src/theme/tokens.ts:8
Letter Spacing	widest: 0.4em	src/theme/tokens.ts:31
Transitions	fast: 150ms, normal: 300ms	src/theme/tokens.ts:51-53

Interaction and Animation

The Button uses framer-motion for tactile feedback during user interaction.

• Tap Animation: The component automatically scales to 0.98 on click to provide physical feedback.
• Loading State: When the loading prop is active, a spin-animated character (◌) is prepended to the children, and the button is disabled via pointer-events-none.
• Cyber Effects: In the cyber theme, primary and secondary variants include intense shadow glows (e.g., hover:shadow-[0_0_20px_#ff00ffaa]).

Implementation Example

import { Button } from "@pcstyle/ui";

export function Example() {
  return (
    <Button 
      variant="primary" 
      size="lg" 
      loading={false}
      onClick={() => console.log("Action triggered")}
    >
      Initialize System
    </Button>
  );
}

Sources: src/components/buttons/Button.tsx:16-20, src/index.ts:4-5

Summary

The Button component serves as a primary interaction point in the PCSTYLE UI library. It effectively bridges the gap between functional utility and aesthetic expression by leveraging a centralized theme provider and robust animation libraries. Through its variant and size systems, it maintains high flexibility for various UI layouts while adhering to strict design tokens for typography and spacing.