DEVVY UI — Build once. Style freely.

Usage

import { Button } from "@devvy-ui/react";

<Button loading={saving} onClick={save}>Save changes</Button>

API reference

Native HTML attributes, className, style and a forwarded ref are supported. Component-specific props:

Prop	Type	Default	Description
variant	solid \| outline \| ghost	solid	Visual emphasis.
tone	brand \| neutral \| danger	brand	Solid background tone. Outline and ghost use neutral text.
size	sm \| md \| lg	md	Control dimensions.
loading	boolean	false	Shows a spinner, sets aria-busy and disables activation.

Source ownership

Add the audited implementation directly into your repository with the CLI:

node /path/to/devvy-ui/packages/cli/src/cli.mjs add button

Make the source yours.

Start from the canonical implementation used by the package and registry. Change the code, keep the MIT notice, and build the behavior your project needs.

Button.tsxREACT / TSX

import { forwardRef, type ButtonHTMLAttributes } from 'react';
import { cx } from '../lib/cx';

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'solid' | 'outline' | 'ghost';
  tone?: 'brand' | 'neutral' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  /** Disables activation while preserving the button's accessible name. */
  loading?: boolean;
}

/** Accessible native button. Defaults to type="button" to avoid accidental form submissions. */
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  {
    className,
    variant = 'solid',
    tone = 'brand',
    size = 'md',
    type = 'button',
    loading = false,
    disabled,
    children,
    ...props
  },
  ref,
) {
  return (
    <button
      ref={ref}
      type={type}
      className={cx('dvy-button', className)}
      data-variant={variant}
      data-tone={tone}
      data-size={size}
      {...props}
      disabled={disabled || loading}
      aria-busy={loading || undefined}
    >
      {loading && <span className="dvy-spinner" aria-hidden="true" />}
      {children}
    </button>
  );
});

Edit your own copy. Downloaded source uses your changes; the component preview above uses the shipped version. Run the source installer first to include shared helpers.

Button

Interactive preview

Usage

API reference

Accessibility & behavior

Platform Behavior & Guidelines

Source ownership

Make the source yours.