diff --git a/resources/css/app.css b/resources/css/app.css
index c5d33af..81a0815 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -812,6 +812,119 @@ html.qr-mobile-page body {
         pointer-events: none;
     }
 
+    .btn-warning {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        border: 1px solid rgb(252 211 77);
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(180 83 9);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .btn-warning:hover {
+        background-color: rgb(255 251 235);
+        border-color: rgb(245 158 11);
+    }
+
+    .btn-warning:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-danger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        border: 1px solid rgb(254 202 202);
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(185 28 28);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .btn-danger:hover {
+        background-color: rgb(254 242 242);
+        border-color: rgb(252 165 165);
+    }
+
+    .btn-danger:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-danger-plain {
+        padding: 0;
+        border: none;
+        background: transparent;
+        border-radius: 0;
+        box-shadow: none;
+        font-weight: 500;
+    }
+
+    .btn-danger-plain:hover {
+        background: transparent;
+        text-decoration: underline;
+    }
+
+    .btn-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.375rem;
+        border-radius: 9999px;
+        border: 1px solid transparent;
+        background-color: transparent;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(67 56 202);
+        transition: background-color 0.15s ease, color 0.15s ease;
+    }
+
+    .btn-link:hover {
+        background-color: rgb(238 242 255);
+        color: rgb(55 48 163);
+    }
+
+    .btn-link:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-link-plain {
+        padding: 0;
+        border: none;
+        background: transparent;
+        border-radius: 0;
+        font-weight: 500;
+    }
+
+    .btn-link-plain:hover {
+        background: transparent;
+        text-decoration: underline;
+    }
+
+    .btn-sm {
+        padding: 0.25rem 0.625rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+    }
+
     .btn-secondary-sm {
         padding: 0.375rem 0.75rem;
         font-size: 0.75rem;
diff --git a/resources/views/components/btn.blade.php b/resources/views/components/btn.blade.php
new file mode 100644
index 0000000..ca40175
--- /dev/null
+++ b/resources/views/components/btn.blade.php
@@ -0,0 +1,34 @@
+@props([
+    'variant' => 'primary',
+    'href' => null,
+    'type' => 'button',
+    'size' => null,
+    'plain' => false,
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+
+    $variantClass = match ($variant) {
+        'secondary' => 'btn-secondary',
+        'warning' => 'btn-warning',
+        'danger' => 'btn-danger',
+        'link' => 'btn-link',
+        default => 'btn-primary',
+    };
+
+    $classes = collect([
+        $variantClass,
+        $size === 'sm' ? 'btn-sm' : null,
+        ($plain && $variant === 'link') ? 'btn-link-plain' : null,
+        ($plain && $variant === 'danger') ? 'btn-danger-plain' : null,
+    ])->filter()->implode(' ');
+@endphp
+
+<{{ $tag }}
+    @if ($href) href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    {{ $attributes->class([$classes]) }}
+>
+    {{ $slot }}
+</{{ $tag }}>
diff --git a/resources/views/meet/invitations/index.blade.php b/resources/views/meet/invitations/index.blade.php
index 77d31a1..50b4b05 100644
--- a/resources/views/meet/invitations/index.blade.php
+++ b/resources/views/meet/invitations/index.blade.php
@@ -18,7 +18,7 @@
                 default => 'meeting',
             };
         @endphp
-        <a href="{{ $backRoute }}" class="text-sm text-indigo-600 hover:underline">← Back to {{ $backLabel }}</a>
+        <x-btn :href="$backRoute" variant="link" size="sm" plain>← Back to {{ $backLabel }}</x-btn>
     </div>
 
     <div class="mt-6 grid gap-6 lg:grid-cols-2">
@@ -60,9 +60,9 @@
                         <p class="font-medium text-slate-900">{{ $invitation->display_name ?? $invitation->email }}</p>
                         <p class="text-slate-500">{{ $invitation->email }} · {{ ucfirst($invitation->status) }}</p>
                     </div>
-                    <div class="flex gap-3">
-                        <form method="POST" action="{{ route('meet.invitations.resend', $invitation) }}">@csrf<button class="text-indigo-600 hover:underline">Resend</button></form>
-                        <form method="POST" action="{{ route('meet.invitations.destroy', $invitation) }}">@csrf @method('DELETE')<button class="text-red-600 hover:underline">Remove</button></form>
+                    <div class="btn-group">
+                        <form method="POST" action="{{ route('meet.invitations.resend', $invitation) }}">@csrf<x-btn type="submit" variant="link" size="sm">Resend</x-btn></form>
+                        <form method="POST" action="{{ route('meet.invitations.destroy', $invitation) }}">@csrf @method('DELETE')<x-btn type="submit" variant="danger" size="sm">Remove</x-btn></form>
                     </div>
                 </li>
             @empty
diff --git a/resources/views/meet/recordings/index.blade.php b/resources/views/meet/recordings/index.blade.php
index 61f6141..73e21fe 100644
--- a/resources/views/meet/recordings/index.blade.php
+++ b/resources/views/meet/recordings/index.blade.php
@@ -13,10 +13,10 @@
                         · {{ $recording->created_at->format('M j, Y g:i A') }}
                     </p>
                 </div>
-                <div class="flex gap-2">
-                    <a href="{{ route('meet.recordings.show', $recording) }}" class="text-sm text-indigo-600 hover:underline">View</a>
+                <div class="btn-group">
+                    <x-btn :href="route('meet.recordings.show', $recording)" variant="link" size="sm" plain>View</x-btn>
                     @if ($recording->hasPlayableFile())
-                        <a href="{{ route('meet.recordings.download', $recording) }}" class="text-sm text-slate-600 hover:underline">Download</a>
+                        <x-btn :href="route('meet.recordings.download', $recording)" variant="secondary" size="sm">Download</x-btn>
                     @endif
                 </div>
             </div>
diff --git a/resources/views/meet/rooms/show.blade.php b/resources/views/meet/rooms/show.blade.php
index 5077643..37d6f08 100644
--- a/resources/views/meet/rooms/show.blade.php
+++ b/resources/views/meet/rooms/show.blade.php
@@ -127,7 +127,7 @@
         @if ($room->status === 'scheduled')
             <form method="POST" action="{{ route('meet.rooms.cancel', $room) }}" class="mt-6" onsubmit="return confirm('Cancel this meeting?')">
                 @csrf
-                <button type="submit" class="text-sm text-red-600 hover:underline">Cancel meeting</button>
+                <x-btn type="submit" variant="danger">Cancel meeting</x-btn>
             </form>
         @endif
     </div>
diff --git a/resources/views/meet/settings/webhooks.blade.php b/resources/views/meet/settings/webhooks.blade.php
index 146b71e..20daedb 100644
--- a/resources/views/meet/settings/webhooks.blade.php
+++ b/resources/views/meet/settings/webhooks.blade.php
@@ -29,7 +29,7 @@
                             <p class="font-mono text-slate-900">{{ $endpoint->url }}</p>
                             <p class="text-slate-500">{{ implode(', ', $endpoint->events ?? []) }}</p>
                         </div>
-                        <form method="POST" action="{{ route('meet.settings.webhooks.destroy', $endpoint) }}">@csrf @method('DELETE')<button type="submit" class="shrink-0 text-red-600 hover:underline">Remove</button></form>
+                        <form method="POST" action="{{ route('meet.settings.webhooks.destroy', $endpoint) }}">@csrf @method('DELETE')<x-btn type="submit" variant="danger" size="sm" class="shrink-0">Remove</x-btn></form>
                     </li>
                 @empty
                     <li class="px-6 py-8 text-center text-slate-500">No webhook endpoints configured.</li>
diff --git a/resources/views/meet/spaces/show.blade.php b/resources/views/meet/spaces/show.blade.php
index a42a591..60511fc 100644
--- a/resources/views/meet/spaces/show.blade.php
+++ b/resources/views/meet/spaces/show.blade.php
@@ -70,7 +70,7 @@
                     <h2 class="text-sm font-medium text-slate-900">Listener invitations</h2>
                     <p class="mt-1 text-sm text-slate-500">Email join links to listeners. Invited people can enter private rooms.</p>
                 </div>
-                <a href="{{ route('meet.invitations.index', $room) }}" class="shrink-0 text-sm text-indigo-600 hover:underline">Bulk import</a>
+                <x-btn :href="route('meet.invitations.index', $room)" variant="link" size="sm" plain class="shrink-0">Bulk import</x-btn>
             </div>
 
             <form method="POST" action="{{ route('meet.invitations.store', $room) }}" class="mt-4 space-y-3">
@@ -95,15 +95,13 @@
                             </div>
                             <form method="POST" action="{{ route('meet.invitations.resend', $invitation) }}">
                                 @csrf
-                                <button type="submit" class="text-xs text-indigo-600 hover:underline">Resend</button>
+                                <x-btn type="submit" variant="link" size="sm">Resend</x-btn>
                             </form>
                         </li>
                     @endforeach
                 </ul>
                 @if ($room->invitations->count() > 8)
-                    <a href="{{ route('meet.invitations.index', $room) }}" class="mt-2 inline-block text-sm text-indigo-600 hover:underline">
-                        View all {{ $room->invitations->count() }} invitations
-                    </a>
+                    <x-btn :href="route('meet.invitations.index', $room)" variant="link" size="sm" plain class="mt-2">View all {{ $room->invitations->count() }} invitations</x-btn>
                 @endif
             @else
                 <p class="mt-4 text-sm text-slate-500">No listener invitations sent yet.</p>
diff --git a/resources/views/meet/webinar/registrations.blade.php b/resources/views/meet/webinar/registrations.blade.php
index 4a2f582..5913074 100644
--- a/resources/views/meet/webinar/registrations.blade.php
+++ b/resources/views/meet/webinar/registrations.blade.php
@@ -4,9 +4,9 @@
             <div>
                 <h1 class="text-xl font-semibold text-slate-900">Registrations</h1>
                 <p class="text-sm text-slate-500">{{ $room->title }}</p>
-                <a href="{{ route('meet.webinars.show', $room) }}" class="mt-1 inline-block text-sm text-indigo-600 hover:underline">← Back to webinar</a>
+                <x-btn :href="route('meet.webinars.show', $room)" variant="link" size="sm" plain class="mt-1">← Back to webinar</x-btn>
             </div>
-            <a href="{{ route('meet.webinar.register', $room) }}" target="_blank" class="text-sm text-indigo-600 hover:underline">Public registration page</a>
+            <x-btn :href="route('meet.webinar.register', $room)" target="_blank" variant="link" size="sm" plain>Public registration page</x-btn>
         </div>
 
         <ul class="mt-6 divide-y divide-slate-100 rounded-2xl border border-slate-200 bg-white">
@@ -17,9 +17,9 @@
                         <p class="text-slate-500">{{ $registration->email }} · {{ ucfirst($registration->status) }}</p>
                     </div>
                     @if ($registration->status === 'pending')
-                        <div class="flex gap-2">
-                            <form method="POST" action="{{ route('meet.webinar.registrations.approve', [$room, $registration]) }}">@csrf<button class="text-emerald-600 hover:underline">Approve</button></form>
-                            <form method="POST" action="{{ route('meet.webinar.registrations.reject', [$room, $registration]) }}">@csrf<button class="text-red-600 hover:underline">Reject</button></form>
+                        <div class="btn-group">
+                            <form method="POST" action="{{ route('meet.webinar.registrations.approve', [$room, $registration]) }}">@csrf<x-btn type="submit" variant="link" size="sm">Approve</x-btn></form>
+                            <form method="POST" action="{{ route('meet.webinar.registrations.reject', [$room, $registration]) }}">@csrf<x-btn type="submit" variant="danger" size="sm">Reject</x-btn></form>
                         </div>
                     @endif
                 </li>