Button

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

Usage

Basic Button

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

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

Live Example:

Button Variants

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

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

Live Example:

Button Sizes

import { Button } from "@prisma/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="3xl">3X Large</Button>
    </div>
  );
}

Live Example:

With Icons

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

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

Live Example:

With onClick Handler

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

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

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

As Link

Use the href prop to render the button as an anchor element:

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

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

Live Example:

Go to Docs

Disabled State

import { Button } from "@prisma/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/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: "lg")
href - When provided, renders an anchor element instead of a button
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-strong

Stronger emphasis version of the default variant.

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

default-weak

Weaker emphasis version of the default variant.

<Button variant="default-weak">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>

success

Success variant for positive actions and confirmations.

<Button variant="success">Saved</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, plus four icon-only sizes:

lg - Large button (default)
xl - Extra large button
2xl - 2X large button
3xl - 3X large button
icon-lg - Icon-only large
icon-xl - Icon-only extra large
icon-2xl - Icon-only 2X large
icon-3xl - Icon-only 3X large

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

Features

✅ Eight semantic variants
✅ Four size options
✅ Disabled state support
✅ Works as link with href prop
✅ Eclipse design system styling
✅ Hover and focus states
✅ Accessible keyboard navigation
✅ Renders native <button> and <a> elements

Best Practices

Use default for standard actions and form submissions
Use default-strong for primary calls-to-action
Use default-weak 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 success for positive confirmations and completion states
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-strong">Save Changes</Button>
  <Button variant="default-weak">Cancel</Button>
</div>

Destructive Action with Confirmation

<div className="flex gap-4">
  <Button variant="error">Delete Account</Button>
  <Button variant="default-weak">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 href prop when the action should navigate
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-strong">
    Subscribe
  </Button>
</form>

Combining with Icons

You can combine buttons with icons for enhanced visual communication:

import { Button } from "@prisma/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