Button

An interactive button component with multiple variants, sizes, and states for triggering actions.

Usage

Basic Button

import { Button } from "@prisma-docs/eclipse";

export function MyComponent() {
  return <Button variant="default">Click me</Button>;
}

Live Example:

Button Variants

import { Button } from "@prisma-docs/eclipse";

export function ButtonVariants() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button variant="default">Default</Button>
      <Button variant="default-stronger">Default Stronger</Button>
      <Button variant="default-weaker">Default Weaker</Button>
      <Button variant="ppg">PPG</Button>
      <Button variant="orm">ORM</Button>
      <Button variant="error">Error</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Live Example:

Button Sizes

import { Button } from "@prisma-docs/eclipse";

export function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button size="lg">Large</Button>
      <Button size="xl">Extra Large</Button>
      <Button size="2xl">2X Large</Button>
      <Button size="4xl">4X Large</Button>
    </div>
  );
}

Live Example:

With onClick Handler

import { Button } from "@prisma-docs/eclipse";

export function InteractiveButton() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return (
    <Button variant="ppg" onClick={handleClick}>
      Click me
    </Button>
  );
}

As Link

Use the asChild prop with Next.js Link or other link components:

import { Button } from "@prisma-docs/eclipse";
import Link from "next/link";

export function LinkButton() {
  return (
    <Button variant="ppg" asChild>
      <Link href="/docs">Go to Docs</Link>
    </Button>
  );
}

Disabled State

import { Button } from "@prisma-docs/eclipse";

export function DisabledButton() {
  return (
    <div className="flex gap-4">
      <Button variant="default" disabled>Disabled Default</Button>
      <Button variant="ppg" disabled>Disabled PPG</Button>
      <Button variant="error" disabled>Disabled Error</Button>
    </div>
  );
}

Live Example:

Full Width Button

import { Button } from "@prisma-docs/eclipse";

export function FullWidthButton() {
  return (
    <Button variant="ppg" className="w-full">
      Full Width Button
    </Button>
  );
}

Button Props

variant - The visual style variant (default: "default")
size - The button size (default: "2xl")
asChild - Use the child element as the button (boolean, default: false)
disabled - Whether the button is disabled (boolean, default: false)
onClick - Click event handler (optional)
className - Additional CSS classes (optional)
children - Button content (required)
All standard HTML button attributes are supported

Variants

default

Standard button style with neutral colors.

<Button variant="default">Default Button</Button>

default-stronger

Stronger emphasis version of the default variant.

<Button variant="default-stronger">Stronger Button</Button>

default-weaker

Weaker emphasis version of the default variant.

<Button variant="default-weaker">Weaker Button</Button>

ppg

Prisma Pulse & Accelerate brand colors for product-specific actions.

<Button variant="ppg">PPG Action</Button>

orm

Prisma ORM brand colors for ORM-specific actions.

<Button variant="orm">ORM Action</Button>

error

Error or danger variant for destructive actions.

<Button variant="error">Delete</Button>

link

Link-styled button for navigation that looks like a text link.

<Button variant="link">Learn More</Button>

Sizes

The Button component supports four sizes:

lg - Large button
xl - Extra large button
2xl - 2X large button (default)
4xl - 4X large button

<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
<Button size="2xl">2X Large</Button>
<Button size="4xl">4X Large</Button>

Features

✅ Seven semantic variants
✅ Four size options
✅ Disabled state support
✅ Works as link with asChild prop
✅ Eclipse design system styling
✅ Hover and focus states
✅ Accessible keyboard navigation
✅ Built on Radix UI primitives

Best Practices

Use default for standard actions and form submissions
Use default-stronger for primary calls-to-action
Use default-weaker for secondary or tertiary actions
Use ppg for Prisma Pulse & Accelerate specific features
Use orm for Prisma ORM specific features
Use error for destructive actions (delete, remove, etc.)
Use link for navigation that should appear as text
Choose appropriate sizes based on button importance and context
Use disabled state to indicate unavailable actions
Provide clear, action-oriented button labels
Don't use too many different variants in the same view
Ensure sufficient spacing between buttons

Common Patterns

Primary and Secondary Actions

<div className="flex gap-4">
  <Button variant="default-stronger">Save Changes</Button>
  <Button variant="default-weaker">Cancel</Button>
</div>

Destructive Action with Confirmation

<div className="flex gap-4">
  <Button variant="error">Delete Account</Button>
  <Button variant="default-weaker">Cancel</Button>
</div>

Product-Specific CTAs

<div className="flex gap-4">
  <Button variant="ppg">Try Prisma Accelerate</Button>
  <Button variant="orm">Install Prisma ORM</Button>
</div>

Form Actions

<form>
  {/* form fields */}
  <div className="flex gap-4 mt-4">
    <Button variant="default" type="submit">Submit</Button>
    <Button variant="link" type="button">Reset</Button>
  </div>
</form>

Accessibility

Buttons have proper focus states for keyboard navigation
Disabled buttons are not keyboard accessible
Use semantic <button> elements for actions
Use the asChild prop with links for navigation
Provide clear, descriptive button text
Ensure sufficient color contrast for all variants
Button states are visually distinct and accessible

Integration with Forms

The Button component works seamlessly with HTML forms:

<form onSubmit={handleSubmit}>
  <input type="text" name="email" />
  <Button type="submit" variant="default-stronger">
    Subscribe
  </Button>
</form>

Combining with Icons

You can combine buttons with icons for enhanced visual communication:

import { Button } from "@prisma-docs/eclipse";
import { ChevronRight } from "lucide-react";

export function IconButton() {
  return (
    <Button variant="ppg">
      Get Started
      <ChevronRight className="ml-2 h-4 w-4" />
    </Button>
  );
}

Button

On this page