ToolbarButton

Compact icon button for toolbars, with hover, disabled and keyboard focus states.

npx bezel-add add toolbar-button

About

A compact icon button for React toolbars, editors and canvas controls. It gives an icon a rounded hit area, a soft hover background, a dimmed disabled state and a keyboard focus outline, with a native tooltip from the title. Use it for rows of undo, redo, zoom or layout actions where text labels would take too much space.

Key props: icon (the icon node to render), onClick (click handler), disabled (dims the button and blocks clicks), title (native tooltip text)

packages/ui/src/buttons/ToolbarButton.tsx · 21 lines

import type { ReactNode } from 'react';

type ToolbarButtonProps = {
  icon: ReactNode;
  onClick: () => void;
  disabled?: boolean;
  title?: string;
};

export function ToolbarButton({ icon, onClick, disabled, title }: ToolbarButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      title={title}
      className="p-2 rounded-xl text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#912c22]"
    >
      {icon}
    </button>
  );
}