Migrate icon buttons to Button component and simplify size variants
Replace raw <button> elements with Button variant="ghost" in stat-block panel, toast, player modals. Add icon-sm size variant (h-6 w-6) for compact contexts. Consolidate text button sizes into a single default (h-8 px-3), removing the redundant sm variant. Add size prop to ConfirmButton for consistent sizing. Button now has three sizes: default (text), icon, icon-sm. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -13,9 +13,9 @@ const buttonVariants = cva(
|
||||
ghost: "hover:bg-hover-neutral-bg hover:text-hover-neutral",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 px-3 text-xs",
|
||||
default: "h-8 px-3 text-xs",
|
||||
icon: "h-8 w-8",
|
||||
"icon-sm": "h-6 w-6",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -13,6 +13,7 @@ interface ConfirmButtonProps {
|
||||
readonly onConfirm: () => void;
|
||||
readonly icon: ReactElement;
|
||||
readonly label: string;
|
||||
readonly size?: "icon" | "icon-sm";
|
||||
readonly className?: string;
|
||||
readonly disabled?: boolean;
|
||||
}
|
||||
@@ -23,6 +24,7 @@ export function ConfirmButton({
|
||||
onConfirm,
|
||||
icon,
|
||||
label,
|
||||
size = "icon",
|
||||
className,
|
||||
disabled,
|
||||
}: ConfirmButtonProps) {
|
||||
@@ -94,7 +96,7 @@ export function ConfirmButton({
|
||||
<div ref={wrapperRef} className="inline-flex">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
size={size}
|
||||
className={cn(
|
||||
className,
|
||||
isConfirming
|
||||
|
||||
Reference in New Issue
Block a user