From 8006fbd667be0b62dd0fe870f467b97f94631d40 Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat Date: Tue, 2 Dec 2025 18:32:08 +0800 Subject: [PATCH] style(button): update button styling for improved appearance and consistency - Changed button border radius from rounded-md to rounded-xs for a sleeker look. - Adjusted padding to py-2 px-4 to reduce button size and enhance usability. - Updated hover effect to use shadow-xs for a more subtle interaction feedback. - Simplified size variants by removing unnecessary padding adjustments. --- packages/ui/src/components/primitives/button.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/components/primitives/button.tsx b/packages/ui/src/components/primitives/button.tsx index d233b0f35e..092d55dd1c 100644 --- a/packages/ui/src/components/primitives/button.tsx +++ b/packages/ui/src/components/primitives/button.tsx @@ -7,11 +7,13 @@ import * as React from 'react' const buttonVariants = cva( cn( 'inline-flex items-center justify-center gap-2 whitespace-nowrap', - 'rounded-md text-sm font-medium transition-all', + 'rounded-xs text-sm font-medium transition-all', 'disabled:pointer-events-none disabled:opacity-40', "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", 'aria-loading:cursor-progress aria-loading:opacity-40', - 'hover:shadow-xs' + 'shadow-xs', + // TODO 原值py-4 px-6 太胖了... + 'py-2 px-4' ), { variants: { @@ -24,9 +26,9 @@ const buttonVariants = cva( link: 'text-primary underline-offset-4 hover:underline hover:text-primary-hover' }, size: { - default: 'min-h-9 px-4 py-2 has-[>svg]:px-3', - sm: 'min-h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', - lg: 'min-h-10 rounded-md px-6 has-[>svg]:px-4', + default: 'min-h-9', + sm: 'min-h-8 rounded-md gap-1.5', + lg: 'min-h-10 rounded-md', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10'