rawcomposition · rawcomposition · Jun 29, 2026
diff --git a/frontend/components/AcceptError.tsx b/frontend/components/AcceptError.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Alert from "components/Alert";
-import Button from "components/Button";
+import { Button } from "components/ui/button";
 
 type Props = {
   title: string;
@@ -19,7 +19,7 @@ export default function AcceptError({ title, message, onRetry, retrying, childre
       </Alert>
       <div className="flex items-center gap-2">
         {onRetry && (
-          <Button color="grayOutline" onClick={onRetry} disabled={retrying}>
+          <Button variant="outline" onClick={onRetry} disabled={retrying}>
             {retrying ? "Trying again..." : "Try again"}
           </Button>
         )}

diff --git a/frontend/components/AuthForm.tsx b/frontend/components/AuthForm.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Link, useNavigate } from "react-router-dom";
 import Input from "components/Input";
 import Field from "components/Field";
-import Button from "components/Button";
+import { Button } from "components/ui/button";
 import Alert from "components/Alert";
 import useRequestCode from "hooks/useRequestCode";
 import useVerifyCode from "hooks/useVerifyCode";
@@ -126,8 +126,15 @@ export default function AuthForm({ heading, message, email: initialEmail, lockEm
           </Field>
         )}
 
-        <Button type="submit" color="primary" className="w-full" disabled={disabled}>
-          {requestCode.isPending ? "Sending code..." : verifyCode.isPending ? "Verifying code..." : "Continue"}
+        <Button
+          variant="default"
+          type="submit"
+          className="w-full"
+          loading={pending}
+          loadingText={requestCode.isPending ? "Sending code..." : "Verifying code..."}
+          disabled={disabled}
+        >
+          Continue
         </Button>
 
         {step === "code" && (

diff --git a/frontend/components/Button.tsx b/frontend/components/Button.tsx
diff --git a/frontend/components/DirectionsButton.tsx b/frontend/components/DirectionsButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Button from "components/Button";
+import { Button } from "components/ui/button";
 import SlideOver from "components/SlideOver";
 import { useTrip } from "hooks/useTrip";
 import MarkerWithIcon from "components/MarkerWithIcon";
@@ -29,9 +29,9 @@ export default function DirectionsButton({ lat, lng, hotspotId, markerId, google
   return (
     <>
       <Button
-        onClick={isDirect ? null : () => setOpen(true)}
+        onClick={isDirect ? undefined : () => setOpen(true)}
         target="_blank"
-        color="gray"
+        variant="secondary"
         size="sm"
         href={isDirect ? `https://www.google.com/maps/search/?api=1&query=${lat},${lng}` : undefined}
       >

diff --git a/frontend/components/EmailChangeForm.tsx b/frontend/components/EmailChangeForm.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Button from "components/Button";
+import { Button } from "components/ui/button";
 import Input from "components/Input";
 import Field from "components/Field";
 import Alert from "components/Alert";
@@ -79,8 +79,15 @@ export default function EmailChangeForm({ currentEmail }: Props) {
             />
           </Field>
           <p className="text-sm text-gray-600">We&apos;ll send a 6-digit code to your new email to confirm the change.</p>
-          <Button type="submit" color="pillPrimary" size="pill" disabled={requestMutation.isPending || !isDirty}>
-            {requestMutation.isPending ? "Sending..." : "Send code"}
+          <Button
+            variant="default" shape="pill"
+            size="pill"
+            type="submit"
+            loading={requestMutation.isPending}
+            loadingText="Sending..."
+            disabled={!isDirty}
+          >
+            Send code
           </Button>
         </form>
       ) : (
@@ -100,8 +107,16 @@ export default function EmailChangeForm({ currentEmail }: Props) {
             />
           </Field>
           <div className="flex items-center gap-3">
-            <Button type="submit" color="pillPrimary" size="pill" disabled={updateMutation.isPending || code.length < 6}>
-              {updateMutation.isPending ? "Updating..." : "Update Email"}
+            <Button
+              variant="default"
+              size="lg"
+              shape="pill"
+              type="submit"
+              loading={updateMutation.isPending}
+              loadingText="Updating..."
+              disabled={code.length < 6}
+            >
+              Update Email
             </Button>
             <button
               type="button"

diff --git a/frontend/components/EmptyState.tsx b/frontend/components/EmptyState.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import Card from "components/Card";
+import Icon from "components/Icon";
+import { IconNameT } from "lib/icons";
+import { cn } from "lib/utils";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  icon?: IconNameT;
+  action?: React.ReactNode;
+  className?: string;
+};
+
+export default function EmptyState({ title, description, icon, action, className }: Props) {
+  return (
+    <Card className={cn("flex flex-col items-center gap-2 p-6 text-center", className)}>
+      {icon && <Icon name={icon} className="text-3xl text-gray-400" />}
+      <h3 className="text-lg font-medium text-gray-700">{title}</h3>
+      {description && <p className="max-w-md text-sm text-gray-500">{description}</p>}
+      {action && <div className="mt-2">{action}</div>}
+    </Card>
+  );
+}
diff --git a/frontend/components/GoogleIcon.tsx b/frontend/components/GoogleIcon.tsx
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Icon from "components/Icon";
-import Button from "components/Button";
+import { Button } from "components/ui/button";
 import useRealtimeStatus from "hooks/useRealtimeStatus";
 import clsx from "clsx";
 import { useTrip } from "hooks/useTrip";
@@ -74,7 +74,7 @@ export default function Header({ title, parent, border }: Props) {
       {canEdit && (
         <Button
           type="button"
-          color="pillOutlineAmber"
+          variant="outline-amber" shape="pill"
           className="py-1 px-4 font-normal hidden lg:inline-block ml-auto mr-8"
           onClick={handleShare}
         >

diff --git a/frontend/components/HomeHeader.tsx b/frontend/components/HomeHeader.tsx
@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 import clsx from "clsx";
-import Button from "components/Button";
+import { Button } from "components/ui/button";
 import { useUser } from "hooks/useUser";
 import Logo from "components/Logo";
 export default function HomeHeader() {
@@ -15,15 +15,15 @@ export default function HomeHeader() {
           <h1 className="text-center text-gray-700 font-logo text-2xl">BirdPlan.app</h1>
         </Link>
         {isLoggedIn ? (
-          <Button color="pillPrimary" href="/trips" className="ml-auto">
+          <Button variant="default" shape="pill" href="/trips" className="ml-auto">
             My Trips
           </Button>
         ) : (
           <>
-            <Button color="pillOutlineGray" href="/login" className="ml-auto">
+            <Button variant="outline" shape="pill" href="/login" className="ml-auto">
               Login
             </Button>
-            <Button color="pillPrimary" href="/signup" className="ml-4 hidden xs:flex">
+            <Button variant="default" shape="pill" href="/signup" className="ml-4 hidden xs:flex">
               Signup
             </Button>
           </>

diff --git a/frontend/components/HotspotTargets.tsx b/frontend/components/HotspotTargets.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTrip } from "hooks/useTrip";
 import Icon from "components/Icon";
-import Button from "components/Button";
+import { Button } from "components/ui/button";
 import HotspotTargetRow from "components/HotspotTargetRow";
 import SelectDropdown from "components/SelectDropdown";
 import useTargetView from "hooks/useTargetView";
@@ -57,7 +57,7 @@ export default function HotspotTargets({ hotspotId, onSpeciesClick }: Props) {
       <Alert style="error" className="-mx-1 my-1">
         <Icon name="xMarkCircle" className="text-xl" />
         Failed to load targets
-        <Button color="link" onClick={() => refetch()}>
+        <Button variant="link" onClick={() => refetch()}>
           Retry
         </Button>
       </Alert>

diff --git a/frontend/components/InputNotesSimple.tsx b/frontend/components/InputNotesSimple.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import Button from "components/Button";
+import { Button } from "components/ui/button";
 
 type Props = {
   value?: string;
@@ -42,20 +42,20 @@ export default function InputNotesSimple({ value, onBlur, className, canEdit, sh
         {!inEditMode && canEdit && (
           <Button
             type="button"
-            color="linkBold"
+            variant="link"
             onClick={() => {
               setShowInput(true);
               setTimeout(() => {
                 notsRef.current?.focus();
               }, 0);
             }}
-            className="text-[12px] px-3 py-1"
+            className="text-[12px] px-3 py-1 font-bold"
           >
             {notes ? "Edit" : "Add notes"}
           </Button>
         )}
         {showDone && inEditMode && (
-          <Button type="button" color="linkBold" onClick={() => setShowInput(false)} className="text-[12px] px-3 py-1">
+          <Button type="button" variant="link" onClick={() => setShowInput(false)} className="text-[12px] px-3 py-1 font-bold">
             Done
           </Button>
         )}

diff --git a/frontend/components/ItineraryDay.tsx b/frontend/components/ItineraryDay.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Button from "components/Button";
+import { Button } from "components/ui/button";
 import { useTrip } from "hooks/useTrip";
 import dayjs from "dayjs";
 import { useModal } from "stores/modals";
@@ -192,10 +192,10 @@ export default function ItineraryDay({ day, dayIndex, isEditing }: PropsT) {
       )}
       {isEditing && (
         <div className="flex justify-between items-center gap-2 mt-3">
-          <Button size="xs" color="gray" onClick={() => open("addItineraryLocation", { dayId: day.id })}>
+          <Button size="xs" variant="secondary" onClick={() => open("addItineraryLocation", { dayId: day.id })}>
             + Add Location
           </Button>
-          <Button type="button" color="linkDanger" size="xs" onClick={handleRemoveDay}>
+          <Button type="button" variant="link-danger" size="xs" onClick={handleRemoveDay}>
             Remove day
           </Button>
         </div>

diff --git a/frontend/components/LifelistCard.tsx b/frontend/components/LifelistCard.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import toast from "react-hot-toast";
-import Button from "components/Button";
+import { Button } from "components/ui/button";
 import Icon from "components/Icon";
 import { parseLifelistCsv } from "lib/lifelistCsv";
 
@@ -48,7 +48,7 @@ export default function LifelistCard({ label, count, onImport, onRemove, disable
       <div className="flex shrink-0 items-center gap-3">
         <Button
           type="button"
-          color="link"
+          variant="link"
           size="none"
           onClick={() => fileRef.current?.click()}
           disabled={disabled}

diff --git a/frontend/components/MerlinLink.tsx b/frontend/components/MerlinLink.tsx