PxlKitButton

Deprecated alias for PixelIconButton — a square icon-only button with a required accessible label.

  • Identical runtime to PixelIconButton (re-exported as-is).
  • Renders a square, icon-only button with required label exposed as aria-label and title.
  • Supports tones, sizes, and pixel/linear surface aesthetics.
  • Kept as an alias for backward compatibility; removal carried forward to v3.0.0 (see ADR-0004).
Status
deprecated
Category
actions
Since
v1.0.0

API

import { PxlKitButton } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
label (required)string—Accessible label — set as aria-label and title. Required.
tone'green' | 'cyan' | 'gold' | 'red' | 'purple' | 'pink' | 'neutral''cyan'Color tone (maps to toneMap).
size'sm' | 'md' | 'lg''md'Visual size; the button is a square of it (sizeSquare).
surface'pixel' | 'linear'—Surface aesthetic override; defaults to nearest provider.
icon (required)React.ReactNode—The icon to render inside the square.

Also takes the native attributes and event handlers of <button> (ButtonHTMLAttributes<HTMLButtonElement>), except children.

ref points to <button>.

Accessibility

WCAG target: 2.1 AA

  • button

The label prop is required and is wired to both aria-label and title so screen reader and tooltip discovery stay in sync for an icon-only control.

Keyboard

KeyActionWhen
EnterActivates the button.—
SpaceActivates the button.—

Usage

import { PxlKitButton } from '@pxlkit/ui-kit';

const StarIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
  </svg>
);

export function Default() {
  return <PxlKitButton label="Favorite" icon={<StarIcon />} />;
}

Examples

Default

import { PxlKitButton } from '@pxlkit/ui-kit';

const StarIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
  </svg>
);

export function Default() {
  return <PxlKitButton label="Favorite" icon={<StarIcon />} />;
}

Tones

import { PxlKitButton } from '@pxlkit/ui-kit';

const StarIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
  </svg>
);

export function Tones() {
  return (
    <div className="flex flex-wrap gap-2">
      <PxlKitButton label="Neutral" icon={<StarIcon />} tone="neutral" />
      <PxlKitButton label="Green" icon={<StarIcon />} tone="green" />
      <PxlKitButton label="Cyan" icon={<StarIcon />} tone="cyan" />
      <PxlKitButton label="Gold" icon={<StarIcon />} tone="gold" />
      <PxlKitButton label="Red" icon={<StarIcon />} tone="red" />
      <PxlKitButton label="Purple" icon={<StarIcon />} tone="purple" />
      <PxlKitButton label="Pink" icon={<StarIcon />} tone="pink" />
    </div>
  );
}

Sizes

import { PxlKitButton } from '@pxlkit/ui-kit';

const PlusIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M12 5v14M5 12h14" />
  </svg>
);

export function Sizes() {
  return (
    <div className="flex items-center gap-2">
      <PxlKitButton label="Small" icon={<PlusIcon />} size="sm" />
      <PxlKitButton label="Medium" icon={<PlusIcon />} size="md" />
      <PxlKitButton label="Large" icon={<PlusIcon />} size="lg" />
    </div>
  );
}

Surfaces

import { PxlKitButton } from '@pxlkit/ui-kit';

const StarIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
  </svg>
);

export function Surfaces() {
  return (
    <div className="flex gap-2">
      <PxlKitButton label="Pixel surface" icon={<StarIcon />} surface="pixel" />
      <PxlKitButton label="Linear surface" icon={<StarIcon />} surface="linear" />
    </div>
  );
}

Disabled

import { PxlKitButton } from '@pxlkit/ui-kit';

const StarIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
  </svg>
);

export function Disabled() {
  return <PxlKitButton label="Disabled" icon={<StarIcon />} disabled />;
}

Related