GusGaiotti · GusGaiotti · Jul 9, 2026 · Jul 9, 2026
diff --git a/frontend/src/app/(app)/categories/page.tsx b/frontend/src/app/(app)/categories/page.tsx
@@ -7,6 +7,7 @@ import { CategoryGrid } from "@/components/categories/CategoryGrid";
 import { EmptyState } from "@/components/shared/EmptyState";
 import { LoadingSkeleton } from "@/components/shared/LoadingSkeleton";
 import { PageHeader } from "@/components/shared/PageHeader";
+import { Alert, Button } from "@/components/ui";
 import {
   useCategories,
   useCreateCategory,
@@ -52,23 +53,23 @@ export default function CategoriesPage() {
         title="Categorias"
         subtitle="Organize gastos com categorias por cor."
         actions={
-          <button
-            className="focusable rounded-md bg-[var(--accent)] px-3 py-2 text-sm font-medium text-white"
+          <Button
+            size="sm"
             onClick={() => {
               setEditingCategory(null);
               setErrorMessage(null);
               setOpen(true);
             }}
           >
             Nova categoria
-          </button>
+          </Button>
         }
       />
 
       {errorMessage ? (
-        <div className="mb-4 rounded-md border border-[var(--danger-border)] bg-[var(--danger-bg)] px-4 py-3 text-sm text-[var(--danger-text)]">
+        <Alert tone="danger" className="mb-4">
           {errorMessage}
-        </div>
+        </Alert>
       ) : null}
 
       {categories.isLoading ? <LoadingSkeleton variant="chart" /> : null}
@@ -166,13 +167,7 @@ export default function CategoriesPage() {
             <h3 className="font-display text-3xl italic">Não foi possível excluir</h3>
             <p className="mt-4 text-sm text-[var(--text-secondary)]">{deleteErrorMessage}</p>
             <div className="mt-5 flex justify-end">
-              <button
-                type="button"
-                className="focusable rounded-md bg-[var(--accent)] px-4 py-2 font-medium text-white"
-                onClick={() => setDeleteErrorMessage(null)}
-              >
-                Fechar
-              </button>
+              <Button onClick={() => setDeleteErrorMessage(null)}>Fechar</Button>
             </div>
           </section>
         </div>

diff --git a/frontend/src/app/(app)/dashboard/page.tsx b/frontend/src/app/(app)/dashboard/page.tsx
@@ -25,6 +25,7 @@ import { useLedger } from "@/hooks/useLedger";
 import { exportTransactionsExcel } from "@/lib/api/transactions";
 import { useTransactions } from "@/hooks/useTransactions";
 import { useAuthStore } from "@/lib/store/auth.store";
+import { Alert } from "@/components/ui";
 import { getApiErrorMessage } from "@/lib/utils/api-error";
 
 const filterClassName =
@@ -198,9 +199,7 @@ export default function DashboardPage() {
     <div className="space-y-5">
       {controls}
 
-      {exportError ? (
-        <div className="danger-chip rounded-xl px-4 py-3 text-sm">{exportError}</div>
-      ) : null}
+      {exportError ? <Alert tone="danger">{exportError}</Alert> : null}
 
       {hasError ? (
         <div className="rounded-xl border border-[color-mix(in_srgb,var(--accent-amber)_30%,transparent)] bg-[color-mix(in_srgb,var(--accent-amber)_10%,transparent)] px-4 py-3 text-sm text-[var(--accent-amber)]">

diff --git a/frontend/src/app/(app)/ledger/page.tsx b/frontend/src/app/(app)/ledger/page.tsx
@@ -8,6 +8,7 @@ import { EmptyState } from "@/components/shared/EmptyState";
 import { LoadingSkeleton } from "@/components/shared/LoadingSkeleton";
 import { PageHeader } from "@/components/shared/PageHeader";
 import { ConfirmDialog } from "@/components/shared/ConfirmDialog";
+import { Button, Input } from "@/components/ui";
 import {
   useCancelInvitation,
   useInviteMember,
@@ -118,29 +119,25 @@ export default function LedgerPage() {
         </h2>
         {editing ? (
           <div className="mt-3 space-y-3">
-            <input
+            <Input
               value={draftName}
               onChange={(event) => setDraftName(event.target.value)}
               maxLength={120}
-              className="focusable w-full rounded-md border bg-[var(--bg-elevated)] px-3 py-2 text-lg text-[var(--text-primary)] outline-none"
+              className="text-lg"
             />
             <div className="flex flex-wrap gap-2">
-              <button
-                type="button"
-                disabled={updateLedgerName.isPending}
-                className="focusable rounded-md bg-[var(--accent)] px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-60"
-                onClick={handleSaveName}
-              >
+              <Button size="sm" disabled={updateLedgerName.isPending} onClick={handleSaveName}>
                 {updateLedgerName.isPending ? "Salvando..." : "Salvar"}
-              </button>
-              <button
-                type="button"
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="border border-[var(--border)]"
                 disabled={updateLedgerName.isPending}
-                className="focusable rounded-md border px-3 py-2 text-sm text-[var(--text-secondary)] disabled:cursor-not-allowed disabled:opacity-60"
                 onClick={handleCancelEdit}
               >
                 Cancelar
-              </button>
+              </Button>
             </div>
             {nameError ? <p className="text-sm text-[var(--danger-text)]">{nameError}</p> : null}
           </div>
@@ -166,12 +163,9 @@ export default function LedgerPage() {
         <div className="mb-3 flex items-center justify-between">
           <h2 className="font-display text-3xl italic">Membros</h2>
           {canInvite ? (
-            <button
-              className="focusable rounded-md bg-[var(--accent)] px-3 py-2 text-sm font-medium text-white"
-              onClick={() => setOpen(true)}
-            >
+            <Button size="sm" onClick={() => setOpen(true)}>
               Convidar parceiro(a)
-            </button>
+            </Button>
           ) : null}
         </div>
         <div className="grid gap-4 md:grid-cols-2">

diff --git a/frontend/src/components/categories/CategoryFormModal.tsx b/frontend/src/components/categories/CategoryFormModal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FormEvent, useEffect, useId, useRef, useState } from "react";
+import { Button, Input } from "@/components/ui";
 import type { CreateCategoryRequest } from "@/types/api";
 
 interface CategoryFormModalProps {
@@ -74,7 +75,7 @@
  }

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-4"
      onMouseDown={(event) => {
        if (event.target === event.currentTarget) {
@@ -94,13 +95,12 @@
           {title}
         </h2>
         <form className="mt-5 space-y-4" onSubmit={submit}>
-          <input
+          <Input
             name="name"
             required
             value={name}
             onChange={(event) => setName(event.target.value)}
             placeholder="Nome da categoria"
-            className="focusable w-full rounded-md border bg-[var(--bg-elevated)] px-3 py-2 text-[var(--text-primary)] outline-none placeholder:text-[var(--text-secondary)]"
           />
           <div className="space-y-3">
             <div>
@@ -126,12 +126,9 @@
             Cor selecionada: <span className="font-mono text-[var(--text-primary)]">{color}</span>
           </div>
           <div className="flex gap-2">
-            <button
-              disabled={isSubmitting || !name.trim()}
-              className="focusable rounded-md bg-[var(--accent)] px-4 py-2 font-medium text-white disabled:cursor-not-allowed disabled:opacity-40"
-            >
+            <Button type="submit" disabled={isSubmitting || !name.trim()}>
               {isSubmitting ? "Salvando..." : submitLabel}
-            </button>
+            </Button>
             <button
               type="button"
               onClick={onClose}

diff --git a/frontend/src/components/ledger/InviteModal.tsx b/frontend/src/components/ledger/InviteModal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FormEvent, useState } from "react";
+import { Button, Input } from "@/components/ui";
 
 interface InviteModalProps {
   open: boolean;
@@ -24,21 +25,17 @@ export function InviteModal({ open, onClose, onSubmit, isSubmitting = false }: I
       <section className="surface w-full max-w-md p-6">
         <h3 className="font-display text-3xl italic">Convidar parceiro(a)</h3>
         <form className="mt-5 space-y-4" onSubmit={submit}>
-          <input
+          <Input
             type="email"
             required
             value={email}
             onChange={(event) => setEmail(event.target.value)}
             placeholder="parceiro@email.com"
-            className="focusable w-full rounded-md border bg-[var(--bg-elevated)] px-3 py-2 outline-none"
           />
           <div className="flex gap-2">
-            <button
-              disabled={isSubmitting}
-              className="focusable rounded-md bg-[var(--accent)] px-4 py-2 font-medium text-white disabled:cursor-not-allowed disabled:opacity-40"
-            >
+            <Button type="submit" disabled={isSubmitting}>
               {isSubmitting ? "Enviando..." : "Enviar convite"}
-            </button>
+            </Button>
             <button
               type="button"
               onClick={onClose}