Delphi Design

The Button component is the primary interactive element in the Delphi design system.

Variants

Solid

Outline

Subtle

Ghost

Danger

Success

Dark

Sizes

Small

Base

Large

Icon

With Icons

Small

Base

Large

Icon Only

Disabled

Solid Disabled

Outline Disabled

Subtle Disabled

Ghost Disabled

Danger Disabled

Success Disabled

Shapes

Rounded (default)

Medium

Rectangle

Custom Color Override

You can override the primary color using CSS variables:

<div style={{ "--override-primary": "var(--purple-9)" }}>
  <Button variant="solid">Custom Color</Button>
</div>

Usage

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

export function Example() {
  return (
    <Button variant="solid" size="base">
      Click me
    </Button>
  );
}

With Icons

import { Button, StarIcon } from "@delphi/ui";

export function IconExample() {
  return (
    <Button>
      <StarIcon className="size-4" />
      Favorite
    </Button>
  );
}

As Link

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

export function LinkExample() {
  return (
    <Button asChild>
      <a href="/dashboard">Go to Dashboard</a>
    </Button>
  );
}

API Reference

Prop	Type	Default	Description
`variant`	`"solid" \| "outline" \| "subtle" \| "ghost" \| "danger" \| "success" \| "dark"`	`"solid"`	Visual style variant
`size`	`"small" \| "base" \| "large" \| "icon" \| "none"`	`"base"`	Button size
`shape`	`"rounded" \| "md" \| "rect"`	`"rounded"`	Border radius style
`disabled`	`boolean`	`false`	Disables the button
`asChild`	`boolean`	`false`	Merge props onto child element

Use clear, action-oriented labels like "Save", "Delete", "Continue"

Use the danger variant for destructive actions like delete or remove

Provide visual feedback for loading states with a spinner or disabled state

Ensure buttons have sufficient color contrast (4.5:1 minimum)

Use asChild with Next.js Link for client-side navigation

Include aria-label for icon-only buttons

Use vague labels like "Click here" or "Submit"

Disable buttons without explaining why the action is unavailable

Use too many primary/solid buttons on one screen — establish hierarchy

Mix button styles inconsistently within the same context