feat(buttons): reskin v1 with v2 design + soft labels + v2 polish (#6061)

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Chris Bongers <chrisbongers@gmail.com>

Author: 3 people

packages/shared/src/components/buttons/Button.spec.tsx

@@ -170,4 +170,75 @@ describe('Button', () => {
     });
     expect(await screen.findByRole('link')).toBeInTheDocument();
   });
+
+  describe('inactive prop', () => {
+    it('sets aria-disabled but stays interactive', async () => {
+      const onClick = jest.fn();
+      renderComponent({ children: 'Inactive', inactive: true, onClick });
+      const button = await screen.findByRole('button');
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+      expect(button).not.toBeDisabled();
+      button.click();
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('defers to native disabled when both are set', async () => {
+      renderComponent({
+        children: 'Disabled',
+        inactive: true,
+        disabled: true,
+      });
+      const button = await screen.findByRole('button');
+      expect(button).not.toHaveAttribute('aria-disabled');
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('bold prop', () => {
+    it('upgrades primary label from semibold to bold', async () => {
+      const { rerender } = render(
+        <Button variant={ButtonVariant.Primary}>Default</Button>,
+      );
+      expect(screen.getByRole('button')).toHaveClass('font-semibold');
+      expect(screen.getByRole('button')).not.toHaveClass('font-bold');
+
+      rerender(
+        <Button variant={ButtonVariant.Primary} bold>
+          Bolder
+        </Button>,
+      );
+      expect(screen.getByRole('button')).toHaveClass('font-bold');
+      expect(screen.getByRole('button')).not.toHaveClass('font-semibold');
+    });
+
+    it('is a no-op on non-primary variants', async () => {
+      renderComponent({
+        variant: ButtonVariant.Tertiary,
+        bold: true,
+        children: 'Tertiary bold',
+      });
+      const button = await screen.findByRole('button');
+      expect(button).toHaveClass('font-medium');
+      expect(button).not.toHaveClass('font-bold');
+    });
+  });
+
+  describe('useDefaultCursor prop', () => {
+    it('renders default cursor instead of pointer', async () => {
+      renderComponent({
+        children: 'Default cursor',
+        useDefaultCursor: true,
+      });
+      const button = await screen.findByRole('button');
+      expect(button).toHaveClass('cursor-default');
+      expect(button).not.toHaveClass('cursor-pointer');
+    });
+
+    it('defaults to pointer when omitted', async () => {
+      renderComponent({ children: 'Pointer cursor' });
+      const button = await screen.findByRole('button');
+      expect(button).toHaveClass('cursor-pointer');
+      expect(button).not.toHaveClass('cursor-default');
+    });
+  });
 });

packages/shared/src/components/buttons/Button.tsx

@@ -1,4 +1,10 @@
-import type { HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+import type {
+  HTMLAttributes,
+  MouseEvent as ReactMouseEvent,
+  ReactElement,
+  ReactNode,
+  Ref,
+} from 'react';
 import React, { forwardRef, useState } from 'react';
 import classNames from 'classnames';
 import type { IconProps } from '../Icon';
@@ -13,6 +19,9 @@ import {
   useGetIconWithSize,
   IconOnlySizeToClassName,
   SizeToClassName,
+  HorizontalPadding,
+  IconSidePadding,
+  SizeToGap,
   VariantColorToClassName,
   VariantToClassName,
 } from './common';
@@ -24,14 +33,34 @@ export { ButtonColor, ButtonSize, ButtonVariant, ButtonIconPosition };
 
 export const ButtonGroup = classed(
   'div',
-  'flex gap-1 rounded-12 border border-border-subtlest-tertiary p-1',
+  'flex gap-1 rounded-14 border border-border-subtlest-tertiary p-1',
 );
 
 interface CommonButtonProps {
   size?: ButtonSize;
   loading?: boolean;
   pressed?: boolean;
   disabled?: boolean;
+  /**
+   * Primer-style "looks active, behaves disabled". Renders default
+   * visuals + `aria-disabled="true"` + `cursor: not-allowed` but
+   * remains keyboard-focusable and `onClick`-firing so callers can
+   * surface a tooltip / toast explaining why the action isn't
+   * available.
+   */
+  inactive?: boolean;
+  /**
+   * Bumps Primary from `font-semibold` (600) to `font-bold` (700) for
+   * marketing-heavy CTAs. Has no effect on other variants.
+   */
+  bold?: boolean;
+  /**
+   * HIG-pure preview: render with default cursor instead of pointer
+   * (matches Apple / Microsoft / W3C guidance that pointer is for
+   * links). Off by default; daily.dev's convention is pointer on
+   * buttons.
+   */
+  useDefaultCursor?: boolean;
   children?: ReactNode;
   tag?: React.ElementType & AllowedTags;
 }
@@ -64,6 +93,48 @@ export type ButtonProps<T extends AllowedTags> = BaseButtonProps &
     ref?: Ref<ButtonElementType<T>>;
   };
 
+/**
+ * Variant-driven font weight — same contract as V2 (ChatGPT pattern).
+ * Hierarchy is carried by fill / border, not weight uniformity, so we
+ * drop V1's universal `font-bold`.
+ */
+const variantFontWeight = (
+  variant: ButtonVariant | undefined,
+  bold: boolean | undefined,
+): string => {
+  if (variant === ButtonVariant.Option || variant === ButtonVariant.Quiz) {
+    return 'font-medium';
+  }
+  if (variant === ButtonVariant.Primary) {
+    return bold ? 'font-bold' : 'font-semibold';
+  }
+  return 'font-medium';
+};
+
+const sizeClassMap = (size: ButtonSize, iconOnly: boolean): string =>
+  iconOnly ? IconOnlySizeToClassName[size] : SizeToClassName[size];
+
+const horizontalPaddingClass = (
+  size: ButtonSize,
+  iconOnly: boolean,
+  hasIcon: boolean,
+  hasChildren: boolean,
+  iconPosition: ButtonIconPosition,
+): string | null => {
+  if (iconOnly) {
+    return null;
+  }
+  if (hasIcon && hasChildren) {
+    if (iconPosition === ButtonIconPosition.Left) {
+      return IconSidePadding[size].left;
+    }
+    if (iconPosition === ButtonIconPosition.Right) {
+      return IconSidePadding[size].right;
+    }
+  }
+  return HorizontalPadding[size];
+};
+
 function ButtonComponent<TagName extends AllowedTags>(
   {
     variant,
@@ -75,6 +146,10 @@ function ButtonComponent<TagName extends AllowedTags>(
     iconSecondaryOnHover = false,
     loading,
     pressed,
+    inactive,
+    bold,
+    useDefaultCursor,
+    disabled,
     children,
     onClick,
     tag: Tag = 'button',
@@ -89,12 +164,8 @@ function ButtonComponent<TagName extends AllowedTags>(
     childNodes.every(
       (child) => typeof child === 'string' || typeof child === 'number',
     );
-  const iconOnly = icon && !hasChildren;
-  const getIconWithSize = useGetIconWithSize(
-    size,
-    iconOnly ?? false,
-    iconPosition,
-  );
+  const iconOnly = !!(icon && !hasChildren);
+  const getIconWithSize = useGetIconWithSize(size, iconOnly, iconPosition);
   const isAnchor = Tag === 'a';
   const anchorClickProps =
     isAnchor && onClick
@@ -106,30 +177,48 @@ function ButtonComponent<TagName extends AllowedTags>(
     variant === ButtonVariant.Option || variant === ButtonVariant.Quiz;
   const [isHovering, setIsHovering] = useState(false);
 
+  // `inactive` keeps the element interactive (no `disabled` attr) but
+  // marks it via `aria-disabled` so screen readers announce the state.
+  const ariaDisabled = inactive && !disabled ? true : undefined;
+
   return (
     <Tag
       {...props}
       {...(isAnchor ? anchorClickProps : { onClick })}
       aria-busy={loading}
       aria-pressed={pressed}
+      aria-disabled={ariaDisabled}
+      disabled={disabled}
       ref={ref}
       className={classNames(
-        `btn focus-outline inline-flex cursor-pointer select-none flex-row
-        items-center border no-underline shadow-none transition
-        duration-200 ease-in-out typo-callout`,
-        !isOptionOrQuiz && 'justify-center font-bold',
+        'btn inline-flex select-none flex-row items-center border no-underline shadow-none',
+        useDefaultCursor ? 'cursor-default' : 'cursor-pointer',
+        !isOptionOrQuiz && 'justify-center',
+        variantFontWeight(variant, bold),
+        // Tighten letter spacing on the largest sizes — typo-title3 (20 px)
+        // and typo-body (17 px) read better with -1 % tracking.
+        (size === ButtonSize.XLarge || size === ButtonSize.Large) &&
+          'tracking-[-0.01em]',
         { iconOnly },
-        iconOnly ? IconOnlySizeToClassName[size] : SizeToClassName[size],
-        iconPosition === ButtonIconPosition.Top && `flex-col !px-2`,
+        sizeClassMap(size, iconOnly),
+        horizontalPaddingClass(
+          size,
+          iconOnly,
+          !!icon,
+          hasChildren,
+          iconPosition,
+        ),
+        !iconOnly && icon && hasChildren && SizeToGap[size],
+        iconPosition === ButtonIconPosition.Top && 'flex-col !gap-0.5 !px-2',
         variant && !color && VariantToClassName[variant],
         variant && color && VariantColorToClassName[variant]?.[color],
         className,
       )}
-      onMouseEnter={(e: React.MouseEvent<AllowedElements>) => {
+      onMouseEnter={(e: ReactMouseEvent<AllowedElements>) => {
         props.onMouseEnter?.(e);
         setIsHovering(true);
       }}
-      onMouseLeave={(e: React.MouseEvent<AllowedElements>) => {
+      onMouseLeave={(e: ReactMouseEvent<AllowedElements>) => {
         props.onMouseLeave?.(e);
         setIsHovering(false);
       }}
@@ -140,7 +229,15 @@ function ButtonComponent<TagName extends AllowedTags>(
         ) &&
         getIconWithSize(icon, iconSecondaryOnHover ? isHovering : false)}
       {shouldWrapLabel ? (
-        <span className={classNames('btn-label', loading && 'invisible')}>
+        // `truncate` + `min-w-0` so a full-width button (`w-full`) with a
+        // long label ellipsises cleanly. `min-w-0` is mandatory on flex
+        // children for `truncate` to actually shrink them.
+        <span
+          className={classNames(
+            'btn-label min-w-0 truncate',
+            loading && 'invisible',
+          )}
+        >
           {children}
         </span>
       ) : (
@@ -160,10 +257,9 @@ function ButtonComponent<TagName extends AllowedTags>(
 }
 
 /**
- * @deprecated Prefer `ButtonV2` from `./ButtonV2` for new work. v1 `Button`
- * stays for back-compat with existing call sites and will be removed once
- * the v2 button system migration is complete. See
- * `packages/shared/src/components/buttons/Buttons.mdx` for the migration
- * guide and per-variant differences.
+ * `Button` is daily.dev's default button. The V1 component shell is kept
+ * for back-compat with every existing call site; the visual layer
+ * underneath now matches `ButtonV2` (same tokens, same polish, same
+ * size/typo/gap/padding scale). See `Buttons.mdx` for the design DNA.
  */
 export const Button = forwardRef(ButtonComponent);