feat(ui): Implement <SecondaryButton /> component (#3533)

.changeset/neat-colts-knock.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/src/primitives/icon.tsx

@@ -649,3 +649,20 @@ export const InformationLegacy = createIcon({
     </>
   ),
 });
+
+export const Envelope = createIcon({
+  displayName: 'IconEnvelope',
+  viewBox: '0 0 16 16',
+  path: (
+    <>
+      <path
+        fill='currentColor'
+        d='M2.75 2.75A1.75 1.75 0 0 0 1 4.5v1.016l6.51 3.693a1.094 1.094 0 0 0 .98 0L15 5.517V4.5a1.75 1.75 0 0 0-1.75-1.75H2.75Z'
+      />
+      <path
+        fill='currentColor'
+        d='m15 6.984-5.924 3.4a2.406 2.406 0 0 1-2.152 0L1 6.983V11.5a1.75 1.75 0 0 0 1.75 1.75h10.5A1.75 1.75 0 0 0 15 11.5V6.984Z'
+      />
+    </>
+  ),
+});

packages/ui/src/primitives/secondary-button.tsx

@@ -0,0 +1,33 @@
+import cn from 'clsx';
+import * as React from 'react';
+
+import { Spinner } from './spinner';
+
+export const SecondaryButton = React.forwardRef(function SecondaryButton(
+  {
+    busy,
+    children,
+    className,
+    disabled,
+    icon,
+    ...props
+  }: React.ButtonHTMLAttributes<HTMLButtonElement> & { icon?: React.ReactNode; busy?: boolean },
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  return (
+    // eslint-disable-next-line react/button-has-type
+    <button
+      ref={forwardedRef}
+      {...props}
+      className={cn(
+        'flex items-center justify-center gap-2 w-full bg-transparent text-gray-12 font-medium rounded-md bg-clip-padding border border-gray-a6 shadow-sm shadow-gray-a3 py-1.5 px-2.5 outline-none focus-visible:ring-[0.1875rem] focus-visible:ring-gray-a3 focus-visible:border-gray-a8 text-base',
+        busy ? 'cursor-wait' : disabled ? 'disabled:cursor-not-allowed disabled:opacity-50' : 'hover:bg-gray-a2',
+        className,
+      )}
+      disabled={busy || disabled}
+    >
+      {icon ? <span className='text-base'>{busy ? <Spinner>Loading…</Spinner> : <span>{icon}</span>}</span> : null}
+      {children}
+    </button>
+  );
+});