Button - Prisma — ContextQMD

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

Usage

Basic Button

tsx

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

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

Live Example:

<div className="flex flex-wrap gap-4 my-4"> <Button variant="default">Default Button</Button> </div>

Button Variants

tsx

import { Button } from "@prisma/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="success">Success</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Live Example:

<div className="flex flex-wrap gap-4 my-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="success">Success</Button> <Button variant="link">Link</Button> </div>

Button Sizes

tsx

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="4xl">4X Large</Button>
    </div>
  );
}

Live Example:

<div className="flex flex-wrap items-center gap-4 my-4"> <Button size="lg">Large (Default)</Button> <Button size="xl">Extra Large</Button> <Button size="2xl">2X Large</Button> <Button size="4xl">4X Large</Button> </div>

With onClick Handler

tsx

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:

tsx

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

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

Disabled State

tsx

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:

<div className="flex flex-wrap gap-4 my-4"> <Button variant="default" disabled>Disabled Default</Button> <Button variant="ppg" disabled>Disabled PPG</Button> <Button variant="error" disabled>Disabled Error</Button> </div>

Full Width Button

tsx

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.

tsx

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

default-stronger

Stronger emphasis version of the default variant.

tsx

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

default-weaker

Weaker emphasis version of the default variant.

tsx

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

ppg

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

tsx

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

orm

Prisma ORM brand colors for ORM-specific actions.

tsx

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

error

Error or danger variant for destructive actions.

tsx

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

success

Success variant for positive actions and confirmations.

tsx

<Button variant="success">Saved</Button>

link

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

tsx

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

Sizes

The Button component supports four sizes:

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

tsx

<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
<Button size="2xl">2X Large</Button>
<Button size="4xl">4X 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-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 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

tsx

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

Destructive Action with Confirmation

tsx

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

Product-Specific CTAs

tsx

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

Form Actions

tsx

<form>
  <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:

tsx

<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:

tsx

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>
  );
}