feature: button and badge components updated.

frontend/src/app/(dashboard)/settings/subscriptions/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { authApi } from '@/lib/api/auth';
+import { Button } from '@/components/ui/common/Button';
 import type { SubscriptionAlertData } from '@/types/subscription';
 
 const PLAN_OPTIONS = [
@@ -176,9 +177,9 @@ export default function SubscriptionsSettingsPage() {
               );
             })}
           </div>
-          <button
+          <Button
             type="button"
-            className="inline-flex items-center justify-center rounded-[var(--radius-md)] bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90 disabled:opacity-60"
+            variant="primary"
             onClick={() => {
               const selectedPlanLabel = selectedPlan?.name ?? 'the selected plan';
               setPurchaseNotice(
@@ -187,7 +188,7 @@ export default function SubscriptionsSettingsPage() {
             }}
           >
             Start purchase process
-          </button>
+          </Button>
           {purchaseNotice && (
             <div className="rounded-[var(--radius-md)] border border-emerald-500/30 bg-emerald-500/10 px-4 py-3">
               <p className="text-sm text-emerald-200">{purchaseNotice}</p>