Review this generated component before it enters a shared UI package.
Build a button with two finite tones, two widths, a disabled state, and a visible keyboard-focus indicator using statically detectable classes and narrowly scoped transitions.
TSX
type Props = {
tone: 'primary' | 'danger';
wide?: boolean;
disabled?: boolean;
children: React.ReactNode;
};
export function ActionButton({ tone, wide, disabled, children }: Props) {
const toneClass = `bg-${tone}-600 hover:bg-${tone}-700`;
const widthClass = wide ? 'px-8' : 'px-4';
return (
<button
type="button"
disabled={disabled}
className={`py-2 px-4 ${widthClass} ${toneClass} transition-all focus:outline-none`}
>
{children}
</button>
);
}
generated code is illustrative, not from any one model