Components: PixelButton

A versatile button component. Surface-aware, tone-driven, and keyboard-ready out of the box.

Installation

Add the package

The kit ships as a single ESM package. Install with the package manager of your choice.

terminalbash
npm install @pxlkit/ui-kit
# or
pnpm add @pxlkit/ui-kit
# or
yarn add @pxlkit/ui-kit

Usage

Basic usage

A primary button is the default. Use it for the main action on a page.

basic.tsxtypescript
import { PixelButton } from '@pxlkit/ui-kit';
export function Example() {
  return <PixelButton>Press Start</PixelButton>;
}

With tones

Map intent to a semantic tone — gold for high-stakes confirms, red for destructive paths.

tones.tsxtypescript
<PixelButton tone="gold">Continue</PixelButton>
<PixelButton tone="red">Delete</PixelButton>

Sizes

Three sizes cover most surfaces — compact toolbars, default forms, and oversized hero CTAs.

sizes.tsxtypescript
<PixelButton size="sm">Small</PixelButton>
<PixelButton size="md">Medium</PixelButton>
<PixelButton size="lg">Large</PixelButton>

Props

tone"cyan" | "gold" | "red" | "purple" | "green" | "neutral""cyan"Semantic color intent. Drives background, border, and text token.
size"sm" | "md" | "lg""md"Controls horizontal/vertical padding and label font size.
variant"solid" | "outline" | "ghost""solid"Fill style. Use ghost inside tight toolbars to reduce visual weight.
disabledbooleanfalseVisually mutes the button and blocks pointer + keyboard activation.
onClick(event: MouseEvent) => void—Fired on click and on Enter/Space when the button has focus.

Accessibility